CSS 테두리 속성을 사용하여 삼각형을 그리는 방법

테두리를 사용하여 삼각형을 그리는 것은 실제로 이상한 기술입니다.

는 테두리 기능을 활용합니다. 요소의 너비와 높이가 모두 0인 경우 테두리의 너비를 설정하고(적어도 인접한 두 테두리의 너비를 설정) 테두리가 요소를 확장합니다. .

네 개의 테두리의 너비가 동시에 설정되면 네 개의 변이 마침내 요소 중심의 한 점으로 수렴됩니다.

따라서 너비와 높이가 있는 요소에 테두리를 설정할 때 그림과 같이 네 개의 테두리가 직각이 아닌 대각선으로 연결됩니다.

그래서 너비와 높이를 설정하지 않고 네 개의 테두리에 서로 다른 색상을 설정하면 서로 다른 색상과 서로 다른 방향을 가진 4개의 삼각형을 얻을 수 있습니다. 삼각형, 별도의 테두리를 설정할 수 없습니다. 테두리는 너비만 있고 높이가 없는 선이므로 페이지에 표시할 수 없습니다.

따라서 여전히 4개의 테두리를 설정해야 합니다. 동시에 또는 두 개의 인접한 테두리 제공 테두리의 너비를 설정하고 테두리 중 하나에 색상을 추가하기만 하면 됩니다.

4개 측면 설정:

만 인접한 두 변을 설정합니다:

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