CSS를 사용하여 삼각형을 그리는 방법 소개

CSS를 사용하여 삼각형을 그리는 방법을 묻는 인터뷰 질문을 봤습니다

우리 모두 알고 있듯이 많은 그래픽이 삼각형으로 분할될 수 있으므로 삼각형을 그리는 방법을 알면 흥미로운 모양을 많이 그릴 수 있습니다

삼각형을 그리는 원리는 네 방향의 테두리의 폭, 선 스타일, 색상을 조정하는 것입니다.

너비를 충분히 크게 늘리고 다양한 방향으로 색상을 변경해 보면 상자 모델의 테두리가 사다리꼴 모양의 4개 선으로 이루어진 것을 확인할 수 있습니다.

이때, 박스 모델 내부의 높이와 너비를 0px로 조정하면 삼각형이 형성됩니다.

rree

원리를 이해했다면 이제 직접 코드를 작성할 수 있을 것입니다.

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

위 코드는 하향 삼각형을 생성할 수 있습니다. 아래 그림과 같이 (이해하기 쉽도록 오른쪽 색상을 교체했습니다.)

이 렌더링을 통해 삼각형을 생성하려면 세 개의 테두리가 필요하다는 것을 알 수 있습니다.

왼쪽 및 오른쪽 테두리의 높이에 따라 삼각형 높이의 길이가 결정됩니다.

삼각형의 높이는 테두리 자체의 너비에 따라 결정됩니다

그렇다면 오른쪽 아래 또는 왼쪽 아래 등을 가리키는 삼각형을 생성하는 방법은 무엇일까요?

위 사진을 통해 이미 보셨을 거라 믿습니다.

두 개의 테두리만 필요합니다.

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

이 코드는 밑변과 높이가 100px인 왼쪽 하단을 가리키는 삼각형을 생성합니다.

border-width를 기억하시나요?

한 줄의 코드로 테두리 4개의 너비를 정의할 수 있습니다.

위 내용은 CSS를 사용하여 삼각형을 그리는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!