[CSS] 삼각형 만들기

게이지바를 포인팅할 삼각형이 필요해서 삼각형 도형을 만들어보았다.

 

HTML코드

<div class="triangle"></div>
<div class="triangle-2"></div>
<div class="triangle-3"></div>

CSS 코드

.triangle{
    width: 0px;
    height: 0px;
    border-top: 25px solid transparent;
    border-right: 50px solid red;
    border-bottom: 25px solid transparent;
}

.triangle-2{
    width: 0px;
    height: 0px;
    border-top: 25px solid transparent;
    border-left: 50px solid green;
    border-bottom: 25px solid transparent;
}

.triangle-3{
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid blue;
}

실행결과