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: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> How and why does it work? Answer: CSS Triangles: A Tragedy in Five Acts 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