분류 css

CSS만으로 삼각형 구현하기

컨텐츠 정보

  • 조회 872 (작성일 )

본문

CSS만으로 삼각형을 구현하는 예제입니다.

 

CSS:

.arrow-up {

width: 0; 

height: 0; 

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid black;

}

 

.arrow-down {

width: 0; 

height: 0; 

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

}

 

.arrow-right {

width: 0; 

height: 0; 

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

border-left: 60px solid green;

}

 

.arrow-left {

width: 0; 

height: 0; 

border-top: 10px solid transparent;

border-bottom: 10px solid transparent; 

border-right:10px solid blue; 

 

HTML:

​<div class="arrow-up"></div>

<div class="arrow-down"></div>

<div class="arrow-left"></div>

<div class="arrow-right"></div> 

 

미리보기:

http://365ok.co.kr/dn/css/triangle.html 

 

 

원본출처 : https://css-tricks.com

 

css