css实现小三角_html/css

来源：微智科技网

Triangle Up

 #triangle-up { 
 width : 0 ; 
 height : 0 ; 
 border-left : 50px solid transparent ; 
 border-right : 50px solid transparent ; 
 border-bottom : 100px solid red ; 
 } 

Triangle Down

 #triangle-down { 
 width : 0 ; 
 height : 0 ; 
 border-left : 50px solid transparent ; 
 border-right : 50px solid transparent ; 
 border-top : 100px solid red ; 
 } 

Triangle Left

 #triangle- left { 
 width : 0 ; 
 height : 0 ; 
 border-top : 50px solid transparent ; 
 border-right : 100px solid red ; 
 border-bottom : 50px solid transparent ; 
 } 

Triangle Right

 #triangle- right { 
 width : 0 ; 
 height : 0 ; 
 border-top : 50px solid transparent ; 
 border-left : 100px solid red ; 
 border-bottom : 50px solid transparent ; 
 } 

Triangle Top Left

 #triangle-topleft { 
 width : 0 ; 
 height : 0 ; 
 border-top : 100px solid red ; 
 border-right : 100px solid transparent ; 
 } 

Triangle Top Right

 #triangle-topright { 
 width : 0 ; 
 height : 0 ; 
 border-top : 100px solid red ; 
 border-left : 100px solid transparent ; 
 
 } 

Triangle Bottom Left

 #triangle-bottomleft { 
 width : 0 ; 
 height : 0 ; 
 border-bottom : 100px solid red ; 
 border-right : 100px solid transparent ; 
 } 

Triangle Bottom Right

 #triangle-bottomright { 
 width : 0 ; 
 height : 0 ; 
 border-bottom : 100px solid red ; 
 border-left : 100px solid transparent ; 
 } 