CSS 화살표 만들기 > 학습

화살표를 이미지로 넣고 계신가요? 아래의 소스를 통해

이미지 대신 클래스로 미리 만들어 사용해보세요

<style>
    .arrow{
        display: inline-block;
        border: solid black;
        border-width: 0 3px 3px 0; /*화살표의 두께*/
        padding: 3px; /*화살표의 크기*/
    }

    .up{transform: rotate(-135deg);}
    .down{transform: rotate(45deg);}
    .right{transform: rotate(-45deg);}
    .left{transform: rotate(135deg);}
</style>

<div><i class="arrow up"></i> ----- UP</div>
<div><i class="arrow down"></i> ----- DOWN</div>
<div><i class="arrow right"></i> ----- RIGHT</div>
<div><i class="arrow left"></i> ----- LEFT</div>

  결과화면