CSS로 삼각형을 만드는 방법(코드 포함)

CSS의 속성은 매우 마법적이어서 예상치 못한 그래픽을 많이 만들어낼 수 있습니다. 이 글은 주로 CSS를 사용하여 삼각형을 만드는 방법을 공유하고자 합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

먼저 새로운 100x100 정사각형 div를 만들고 편의를 위해 배경색을 설정합니다.

Css 코드는 다음과 같습니다.

width: 100px;
height: 100px;
background-color: #333;

그런 다음 이 div에 두 개의 테두리를 추가합니다.

width: 100px;
height: 100px;
background-color: #333;
border-left:50px solid red;
border-bottom: 50px solid blue;

렌더링은 다음과 같습니다.

기분이 좋지 않습니까? 왜 이런 일이 발생합니까? 위에서는 50픽셀의 왼쪽 테두리와 50픽셀의 아래쪽 테두리를 div에 추가했습니다. 브라우저는 div의 왼쪽 하단 모서리에 있는 두 가지 색상을 지능적으로 나눕니다. 위쪽은 왼쪽 테두리의 빨간색이고 아래쪽은 빨간색입니다. 하단 테두리의 파란색입니다. 이걸 보시면 헷갈리실 수도 있는데, 삼각형을 구현해보고 싶지 않으신가요? 테두리는 어떻게 설정하나요? 걱정하지 마십시오. 다음으로 위쪽 및 오른쪽 테두리를 추가하겠습니다.

   width: 100px;
   height: 100px;
   background-color: #333;
   border-left:50px solid red;
   border-bottom: 50px solid blue;
   border-right:50px solid green;
   border-top:50px solid yellow;

효과:

이제 이해하셨나요? 이 div의 너비와 높이를 0px로 설정한 다음 효과를 살펴보겠습니다.

하하, 네 개의 삼각형이 나왔습니다. out 중 원하는 것 중 다른 세 가지의 테두리 색상을 투명하게 설정하면 됩니다. 예를 들어 아래 파란색 삼각형을 원할 경우 CSS 코드는 다음과 같습니다.

  width: 0px;
  height: 0px;
  border-left:50px solid transparent;
  border-bottom: 50px solid blue;
  border-right:50px solid transparent;
  border-top:50px solid transparent;

결국 우리가 원하는 삼각형이 나옵니다.

위 내용은 CSS로 삼각형을 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!