CSS로 삼각형 화살표 그리기

CSS로 삼각형 화살표를 그립니다. 순수 CSS를 사용하면 다양한 브라우저와 호환되는 삼각형 화살표를 만드는 데 코드가 거의 필요하지 않습니다!

CSS 코드:

/* create an arrow that points up */
div.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points down */
div.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points left */
div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-right: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-left: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

이 삼각형을 그리는 핵심은 화살표 방향의 두 변에 두꺼운 테두리를 두는 것입니다. 화살표 반대쪽을 향하는 쪽에도 동일한 두꺼운 테두리가 있고 이 쪽의 색상은 삼각형의 색상입니다. 테두리가 두꺼울수록 삼각형이 커집니다. 이렇게 하면 다양한 색상, 크기 및 방향의 화살표를 그릴 수 있습니다. 가장 좋은 점은 이 효과를 얻으려면 몇 줄의 CSS 코드만 필요하다는 것입니다.