CSS 테두리 선으로 삼각형 화살표 만들기

CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있다.

 

삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로

 

다음과 같은 원리로 만들어진다.

 

<div class="arrow-up"></div>

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000; /* ▲ */
 }
 .arrow-down {
  width: 0;
  height: 0;
  border-top: 10px solid #000; /* ▼ */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #000; /* ◀︎ */
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000; /* ► */
}

 

비트맵 이미지를 사용하는 방법보다 추가 트래픽을 줄일 수 있고,

 

리소스 관리를 간결하게 할 수 있으므로

 

말풍선, 셀렉트박스 버튼, 풀다운 메뉴 등 다양하게 활용할 수 있다.