This is the best explanation on how to create CSS triangles: http://www.uselesspickles.com/triangles/

By creating divs without width or height, the borders end up creating a triangle when you leave some of the borders as transparent.

Credit That page was written by a co-worker, way before other people figured out this trick.

#tri { width: 0; height: 0; border-top-width: 20px; border-top-style: solid; border-top-color: transparent; border-right-width: 20px; border-right-style: solid; border-right-color: red; } <div id="tri"></div>

jsFiddle demo