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

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

삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어집니다.

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

.arrow-up{
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-right: 20px solid white;
  border-bottom: 20px solid purple;
}

위쪽 삼각형 화살표를 만드는 방식은 다음과 같습니다.

상단 화살표 외에 각 방향으로 화살표를 만들어 사용할 수 있습니다.

.arrow-up{
	width: 0;
	height: 0;
	border-bottom: 20px solid purple;/* 화살표 */
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
.arrow-down{
	width: 0;
	height: 0;
	border-top: 20px solid purple;/* 화살표 */
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}
.arrow-left{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid purple;/* 화살표 */
}
.arrow-right{
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid purple;/* 화살표 */
}

완성한 화살표를 다음처럼 풀다운 메뉴 위치 가이드 등의 용도로 다양하게 활용할 수 있습니다.

비트맵 이미지를 사용하는 방법보다 추가 트래픽을 줄일 수 있고, 리소스 관리를 간결하게 할 수 있으므로 말풍선, 풀다운 메뉴, 불릿 등 다양하게 활용할 수 있습니다.

완성한 CSS를 조금 더 최적화 해서 중복되는 내용들을 줄여서 만들면 다음처럼 만들 수 있습니다.

HTML 태그에 적용하는 클래스는 "arrow arrow-up" 과 같이 2개를 적용해야 합니다.

.arrow{
	width: 0;
	height: 0;
	border: 20px solid transparent;
}
.arrow-up{
    border-top: 0;
	border-bottom: 20px solid purple;/* 화살표 */
}
.arrow-down{
    border-bottom: 0;
	border-top: 20px solid purple;/* 화살표 */
}
.arrow-left{
    border-left: 0;
	border-right: 20px solid purple;/* 화살표 */
}
.arrow-right{
    border-right: 0;
	border-left: 20px solid purple;/* 화살표 */
}

화살표 크기를 줄이려면 "20px" 로 정의한 테두리 두께를 원하는 크기로 모두 변경하면 됩니다.