cssで小三角を実現

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