CSS는 삼각형, CSS 렌더링 중공 삼각형, CSS의 실현 화살표를 그릴

하나 개 ❀ 리드

이틀 적은 프로젝트 작업 때문에 은퇴를 참조하고 결국 내년 새로운 계획이, 하루 만 더 포함 된 기사에 대한 GitHub의 얼굴 질문에 앉아. 한 가지 문제는 CSS에 포함 된 CSS를 삼각형을 생성하고, 원칙을 설명 . 물론, 날 위해 삼각형 및 설명의 원칙을 그리는 것은 어렵지 않다? 이 글이 문서의 다음 시작으로 지금이 질문을 잡고, 설정 왜 그렇게 경계가 그것을 달성 할 수있다, 그들은 국경을 통해 그것을 할 수 있습니다 알고 있지만 나는 갑자기 순간을 놀라게했다.

II ❀ CSS 삼각형을 그릴

국경 1. 서로 다른 이해

학생들은 태양을 포용하기 위해 매일 아침처럼와 CSS 스타일 프레임 테두리 거래를 쓰기는 직사각형의 모양을 설명 할 수 있어야하는 경우 보통 대장은 항상 얇은 라인의 경계처럼, 내 마음에 있었던 것처럼 그 시절 가르.

< DIV 클래스 = "경계" > </ DIV >

.border { 
    폭 : 50 픽셀 ; 
    높이 : 50 픽셀 ; 
    국경 : 2 픽셀 고체 ; 
    국경 색상 : # 96ceb4 #ffeead # d9534f # ffad60 ; 
}

예를 들어,이 경우에는, 내 의견으로는 네 개의 넓은 사각형으로 200 픽셀 2 픽셀 높은 사각형 컬러 패치 워크 다르다. 이제 우리는 국경 더 큰, 검토에 따라 약간의 조정을 설정합니다 :

.border { 
    폭 : 50 픽셀 ; 
    높이 : 50 픽셀 ; 
    국경 : 50 픽셀 고체 ; 
    국경 색상 : # 96ceb4 #ffeead # d9534f # ffad60 ; 
}

국경이 충분히 넓은 경우,이 응답은 우리가 인생에서 본 적이 사진 프레임 테두리처럼 와서, 그것을 만든 네 개의 사다리꼴의 패치 워크입니다. 흰색 중심 지역은 지금 우리가 요소의 폭과 높이의 제거 얻을 것이다 엘리먼트의 너비와 높이 :

.border { 
    폭 : 0 ; 
    높이 : 0 ; 
    국경 : 50 픽셀 고체 ; 
    국경 색상 : # 96ceb4 #ffeead # d9534f # ffad60 ; 
}

그래서 지금 당신이 그것을 원하는 색 삼각형? 당신은 빨간색 (줄기까지) 3 배속 발 정 얻을 수 있도록 예를 들어, 내가 레드 중국 싶은, 그것은 왼쪽과 오른쪽 테두리 색상에있을 것은 투명으로 설정됩니다.

.border { 
    폭 : 0 ; 
    높이 : 0 ; 
    국경 : 50 픽셀 고체 ; 
    국경 - 색상 : 투명 투명 #의 d9534f ; 
}

우리는 상단의 색상을 볼 수 있지만, 물론,이 여전히 강박 장애 정말 불편 높이의 일부를 차지, 완벽하지, 우리는 경계의 높이를 제거했습니다.

.border { 
    폭 : 0 ; 
    높이 : 0 ; 
    국경 스타일 : 고체 ; 
    보더 폭 : 0 50 픽셀 50 픽셀 ; 
    국경 - 색상 : 투명 투명 #의 d9534f ; 
}

중공 삼각형을 그리는 3.CSS (프레임 만)

그래서 지금 우리가 그냥 국경에서 테두리를 추가 할 수 있도록 먼저 모든 삼각형의 자체는 국경에 의해 구현되고, 그것을 어떻게 국경 개방 삼각형을 그리려고, 가장 직접적인 방법은 작은 삼각형이 최대의 위치를 다시 작성하는 것입니다.

여기에 내가 의사 클래스를 사용하고 작은 삼각형을 정의, 당신은 이런 식으로 뭔가를 볼 수 있습니다

.border { 
    폭 : 0 ; 
    높이 : 0 ; 
    국경 스타일 : 고체 ; 
    보더 폭 : 0 50 픽셀 50 픽셀 ; 
    국경 - 색상 : 투명 투명 #의 d9534f ; 
    위치 : 상대 ; 
} 
.border : 후 { 
    내용 : '' ; 
    국경 스타일 : 고체 ; 
    보더 폭 : 0 40px 40px ; 
    국경 컬러 :투명 투명 # 96ceb4 ; 
    위치 : 절대 ; 
    최고 : 0 ; 
    왼쪽 : 0 ; 
}

볼 수있는 삼각형의 상부에있는 작은 삼각형 정렬 크고 작은 삼각형이 정확하게 큰 삼각형의 중심부와 정렬 떠났다. 이 의사 클래스 참조 객체의 위치 요소 컨텐츠 영역은 우리가 다른 세 개의 삼각형 전에 숨기지 않았다 아무것도하지 않기 때문에, 네 개의 삼각형 센터는 부모 요소입니다.

미세 조정 위치에 간단한 그래서, 당신은 효과가이됩니다 볼 수 있습니다 :

.border : 후 { 
    내용 : '' ; 
    국경 스타일 : 고체 ; 
    보더 폭 : 0 40px 40px ; 
    국경 - 색상 : 투명 투명 # 96ceb4 ; 
    위치 : 절대 ; 
    최고 : 6 픽셀 ; 
    왼쪽 : -40px ; 
}

마지막으로, 우리는 작은 흰색 삼각형의 테두리 색상을 대체 할, 다음 테두리은 중공 삼각형 태어났다 :

화살표 구현 4.

이와 같은 우리의 위치 삼각형 세트, 간단한 위치, 큰 같은 삼각형 전에, 더 나은 말을 달성 화살표 :

그런 다음 흰색의 배경 색상을 변경 :

그것은 화살표 모양 전에 물론, 우리는 의사 클래스도 직선을 추가 할 수 있습니다 :

총 세 가지 ❀

그래서 여기, 우리는 CSS 테두리의 연습을 통해 삼각형을 달성하기 위해 도입뿐만 아니라 단지 개방 삼각형 테두리 그릴 작은 삼각 측량 모드의 사용을 설명하고, 마지막으로 또한 경우에, 화살을 만드는 방법을 설명합니다 향후 작업의 이벤트 이러한 수요 물론, 그것은 또한 쉽게 해결 될 수 있습니다,이 기사는 여기에 소개합니다.

참고

삼각형을 그리기의 CSS 방법 -border

[CSS] 날 6은 CSS와 삼각형을 작성하고, 원리 설명

CSS는 삼각형, CSS 렌더링 중공 삼각형, CSS의 실현 화살표를 그릴

추천