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