How do CSS triangles work?

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

borders meet at 45 degree angles, content in middle

When you have no top border, it looks like this:

no top border

Then you give it a width of 0…

no width

…and a height of 0…

no height either

…and finally, you make the two side borders transparent:

transparent side borders

That results in a triangle.

Leave a Comment