css 소삼각형 구현

5403 단어
Triangle Up
 
 
1
2
3
4
5
6
7 #triangle-up {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 100px solid red ; }
   
Triangle Down
 
 
1
2
3
4
5
6
7 #triangle-down {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 100px solid red ; }
   
Triangle Left
 
 
1
2
3
4
5
6
7 #triangle- left {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-right : 100px solid red ;      border-bottom : 50px solid transparent ; }
  
Triangle Right
 
 
1
2
3
4
5
6
7 #triangle- right {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-left : 100px solid red ;      border-bottom : 50px solid transparent ; }
  
Triangle Top Left
 
 
1
2
3
4
5
6 #triangle-topleft {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-right : 100px solid transparent ; }
  
Triangle Top Right
 
 
1
2
3
4
5
6
7 #triangle-topright {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-left : 100px solid transparent ;
  }
  
Triangle Bottom Left
 
 
1
2
3
4
5
6 #triangle-bottomleft {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-right : 100px solid transparent ; }
  
Triangle Bottom Right
 
 
1
2
3
4
5
6 #triangle-bottomright {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-left : 100px solid transparent ; }

좋은 웹페이지 즐겨찾기