[css] How do CSS triangles work?

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:

CSS Triangle

_x000D_
_x000D_
#triangle-up {_x000D_
  width: 0;_x000D_
  height: 0;_x000D_
  border-left: 50px solid transparent;_x000D_
  border-right: 50px solid transparent;_x000D_
  border-bottom: 100px solid red;_x000D_
}
_x000D_
<div id="triangle-up"></div>
_x000D_
_x000D_
_x000D_

How and why does it work?

This question is related to css geometry polygon css-shapes

The answer is


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.


Similar questions with css tag:

Similar questions with geometry tag:

Similar questions with polygon tag:

Similar questions with css-shapes tag: