CSS만으로 삼각형을 구현하는 예제입니다.

CSS:

.arrow-up {

width: 0; 

height: 0; 

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid black;

}

.arrow-down {

width: 0; 

height: 0; 

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

.arrow-right {

width: 0; 

height: 0; 

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

.arrow-left {

width: 0; 

height: 0; 

border-top: 10px solid transparent;

border-bottom: 10px solid transparent; 

border-right:10px solid blue; 

} 

HTML:

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

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

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

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

미리보기:

http://365ok.co.kr/dn/css/triangle.html 

원본출처 : https://css-tricks.com