TailwindCSS에서 삼각형을 만드는 방법

이 게시물에서는 테두리를 사용하여 TailwindCSS에서 삼각형을 그리는 네 가지 예제를 볼 것입니다.

아래로 삼각형



삼각형은 기하학에서 가장 단순한 모양 중 하나입니다. 세 개의 직선과 두 개의 각으로 그릴 수 있습니다.
  • 너비와 높이를 0으로 설정: w-0h-0
  • 전체 높이와 색상을 갖도록 위쪽 테두리를 다음과 같이 설정합니다. border-t-[75px] border-t-red-500
  • border-l-[50px] border-l-transparentborder-r-[50px] border-r-transparent를 통해 측면 테두리를 투명 색상으로 너비의 절반으로 설정합니다.

  • <div class="w-0 h-0 
      border-l-[50px] border-l-transparent
      border-t-[75px] border-t-red-500
      border-r-[50px] border-r-transparent">
    </div>
    




    삼각형 왼쪽




    <div class="w-0 h-0 
      border-t-[50px] border-t-transparent
      border-r-[75px] border-r-blue-500
      border-b-[50px] border-b-transparent">
    </div>
    




    삼각형 위로




    <div class="w-0 h-0 
      border-l-[50px] border-l-transparent
      border-b-[75px] border-b-yellow-500
      border-r-[50px] border-r-transparent">
    </div>
    




    삼각형 오른쪽




    <div class="w-0 h-0 
      border-t-[50px] border-t-transparent
      border-l-[75px] border-l-green-500
      border-b-[50px] border-b-transparent">
    </div>
    




    이 게시물에서는 간단한 정삼각형의 예를 보여주었습니다. 변이 다른 삼각형이 필요한 경우 테두리 너비[*px]를 가지고 놀 수 있습니다.

    좋은 웹페이지 즐겨찾기