border 속성을 이용하면 삼각형을 만들 수 있다.


우선,

 
<div class='triangle'></div>


border 속성을 사용할 div 하나를 만들어준다.




.triangle{
    width: 0px;
    height: 0px;
    border-top: 100px solid none;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid blue;
}


그리고 이렇게 width와 height 값을 0으로 주고, border-bottom은 원하는 색상을, border-top은 존재하지 않도록 none 처리를, border-left와 right는 transparent로 투명하게 해준다.



이렇게 해주면 사진과 같은 모양의 높이가 100px인 삼각형이 만들어진다.




.triangle{
    width: 0px;
    height: 0px;
    border-top: 100px solid transparent;
    border-left: 100px solid red;
    border-right: 100px solid none;
    border-bottom: 100px solid transparent;
}


만약 윗쪽 꼭지점이 오른쪽을 향하는 모양의 삼각형을 만들고 싶다면, 위처럼 border-right를 none 처리 해주고, top과 bottom은 투명하게, left에 원하는 색상을 부여해주면 된다.



이렇게 방향을 바꾸어주고 border의 사이즈를 조절해주면 원하는 모양의 삼각형들을 만들 수 있다.