테두리를 사용하여 삼각형 원리 만들기

웹사이트의 프런트 엔드 페이지에서는 일부 삼각형이 가끔 사용됩니다. 그림을 사용하는 것 외에도 CSS의 테두리 속성을 사용하여 해당 삼각형을 만들 수도 있습니다. 그렇다면 테두리를 사용하여 삼각형을 만드는 방법은 무엇입니까?

먼저 다음 예를 살펴보세요.

CSS 코드:

  width:100px;
  height:100px;
  border-top: solid 100px blue;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

실행 결과:

표시된 결과에서 테두리의 교차점이 45° 이등분을 형성하는 것을 볼 수 있습니다. 그러면 요소의 너비와 높이가 0으로 설정되면 어떻게 보일까요?

코드:

  width: 0;
  height: 0;
  border-top: solid 100px blue;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

실행 결과:

이런 식으로 우리는 네 개의 정삼각형이 나오는 것을 보게 될 것입니다. 그렇다면 우리가 원하는 것은 삼각형인데 어떻게 해야 할까요? 상상해 보세요. 가장자리를 제거하면 어떤 모습일까요?

코드:

  width: 0;
  height: 0;
  border-left: solid 100px black;
  border-right: solid 100px yellow;
  border-bottom: solid 100px red;

실행 결과:

이번에는 이제 세 개의 삼각형이 생겼으니 검은색과 노란색을 투명한 삼각형으로 바꾸면 빨간색 정삼각형만 남을까요?

코드:

  width: 0;
  height: 0;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
  border-bottom: solid 100px red;

실행 결과:

당연히 삼각형이 나타납니다. . 테두리의 너비를 수정하거나 다른 면을 숨겨서 다른 삼각형을 얻을 수 있습니다.

코드:

  width: 0;
  height: 0;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
  border-bottom: solid 50px red;

실행 결과:

코드:

  width: 0;
  height: 0;
  border-top: solid 100px transparent;
  border-bottom: solid 100px transparent;
  border-left: solid 150px black;

실행 결과:

코드:

  width: 0;
  height: 0;
  border-top: solid 100px transparent;
  border-left: solid 150px black;

실행 결과:

요약: 하나 또는 두 개의 테두리를 제거하고 해당 테두리를 투명하게 설정하여 삼각형을 만들 수 있으며 변형 등이 가능합니다. 많은 예는 나열되지 않습니다.

테두리를 사용하여 삼각형을 만드는 원리에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!