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

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

 

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