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 중국어 웹사이트의 기타 관련 기사를 참조하세요!