Pure CSS Implementation triangles

In the design of the interface, usually need a triangle icon, the general practice is to use the picture, in fact, you can also use CSS to achieve. As follows:

Upward triangle

Triangle to the right

Downward triangle

Triangle to the left

The CSS that implements them are:

 1  .top  { 2   width :  0 ; 3   height :  0 ; 4   Border-color :  transparent transparent #333 transparent ; 5   Border-width :  6px ; 6   Border-style :  solid ; 7 } 

 1  .right  { 2   width :  0 ; 3   height :  0 ; 4   Border-color :  transparent transparent transparent #333 ; 5   Border-width :  6px ; 6   Border-style :  solid ; 7 } 

 1  .down  { 2   width :  0 ; 3   height :  0 ; 4   Border-color :  #333 transparent transparent transparent ; 5   Border-width :  6px ; 6   Border-style :  solid ; 7 } 

 1  .left  { 2   width :  0 ; 3   height :  0 ; 4   Border-color :  transparent #333 transparent transparent ; 5   Border-width :  6px ; 6   Border-style :  solid ; 7 } 

the border-color:transparent used in it is only not supported, so you can use it with confidence