There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:
#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_
}<div id="triangle-up"></div>How and why does it work?
This question is related to
css
geometry
polygon
css-shapes
As alex said, borders of equal width butt up against each other at 45 degree angles:
When you have no top border, it looks like this:
Then you give it a width of 0...
...and a height of 0...
...and finally, you make the two side borders transparent:
That results in a triangle.