정보실

웹학교

정보실

css CSS만으로 삼각형 구현하기

본문

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

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 223회 ]  작성일15-04-27 18:43
css

웹학교