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
#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:
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.
The End



http://stackoverflow.com/questions/7073484/how-do-css-triangles-work



TAGS : | | | | |