[ HTML&CSS ] CSS 화살표 만들기
작성일 20-03-12 21:09
페이지 정보
작성자최고관리자 조회 311회 댓글 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>
결과화면
댓글목록
등록된 댓글이 없습니다.