css 实现小三角_html/css_WEB-ITnose

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