Here's a modified version of it: https://skitch.com/timothee/fxnjf/the-shapes-of-css

Basically, the triangle is made of only the bottom border.

The top border is of width 0px so doesn't show. The element itself is 0x0px so doesn't show either. The right and left borders are transparent so you don't see them, but their width of 50px gives the base of the triangle. (which is then 100px) Finally the bottom border is 100px wide which gives the height of the triangle.

Note that the trapezoid further down is the same thing with a width of 100px for the element itself, as if you stretched that triangle in the middle.

It totally clicked when I saw your example, thanks!

It's because width and height are set to zero. And since the browser tapers the edge of the borders, you get a triangle shape.