[CSS] CSS로 삼각형 만드는 방법

기본 삼각형

가장 간단한 방법은 border 속성을 이용하여 div의 네 면에 색상을 지정하여 삼각형을 만드는 것입니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid blue; /* 원하는 배경색 지정 */
}

---

다양한 삼각형 스타일

border 속성을 활용하여 다양한 스타일의 삼각형을 만들 수 있습니다.

/* 오른쪽 화살표 */
.arrow-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 40px solid green;
}

/* 왼쪽 화살표 */
.arrow-left {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 40px solid red;
}

/* 이등변 삼각형 */
.equilateral {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 87px solid yellow;
}

---

가상요소 (:before, :after) 활용

가상요소를 활용하여 요소를 하나 더 만들어내어 삼각형을 그릴 수 있습니다.

.triangle:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid purple;
}

 

이러한 방법들로 다양한 스타일의 삼각형을 만들 수 있습니다. 각각의 방법은 상황에 따라 유용하게 활용될 수 있습니다.