css로 삼각형 그리기

삼각형 그리기

이미지를 사용하여 삼격형을 적용할 수 있지만 컬러나 모양이 변경되는 경우 이미지를 수정해야 하는 번거로움이 있기 때문에 css를 통해 삼격형을 그리는 게 효과적이다.

• 보더 컬러를 수정하여 삼격형의 색상을 변경할 수 있다.
• 보더 값을 적절하게 변경하면 여러모양의 삼각형을 만들 수 있다.
• transform 속성의 rotate를 사용하면 회전 시킬 수 있다.

정삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: calc( 90px * 1.732 ) solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

결과물

 

직각삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 0px solid transparent;
    border-right: 180px solid transparent;
}

결과물

 

이등변삼각형

/* 위 */
.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

/* 오른쪽 */
.triangle {
    width: 0px;
    height: 0px;
    border-left: 180px solid #666666;
    border-top: 90px solid transparent;
    border-bottom: 90px solid transparent;
}

/* 아래 */
.triangle {
    width: 0px;
    height: 0px;
    border-top: 180px solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
}

/* 왼쪽 */
.triangle {
    width: 0px;
    height: 0px;
    border-right: 180px solid #666666;
    border-top: 90px solid transparent;
    border-bottom: 90px solid transparent;
}

결과물

 

 

 

 

변형 삼각형

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 180px solid #666666;
    border-left: 240px solid transparent;
    border-right: 90px solid transparent;
}

결과물

 

회전

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: calc( 90px * 1.732 ) solid #666666;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    transform: rotate( 45deg );
}

결과물