CSS 화살표 만들기 > 학습

본문 바로가기

사이트 내 전체검색

425,063명이 방문해 주셨습니다.

[  HTML&CSS  ] CSS 화살표 만들기

작성일 20-03-12 21:09

페이지 정보

작성자최고관리자 조회 326회 댓글 0건

본문

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

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


<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>

  결과화면  

50715136c4ae8131d41a5b9c8c228573_1584015103_374.JPG

댓글목록

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.