css3 - How do CSS triangles work? -


This is very much on many CSS shapes and I am particularly surprised 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; }  
  & lt; Div id = "triangle-up" & gt; & Lt; / Div & gt; 

How and why does it work?

CSS triangle: a tragedy in five acts

As, Boundaries of equal width buttons at a 45 ° angle:

Borders meet at 45 degree angle Content in the middle

When you do not have any limit, it looks like:

Then you give it a width of 0 ...

no width

... and height of 0 ...

. ..and in the end, you create the limitations of the transparent both sides:

Transparent side borders

Termination


Comments