How do CSS triangles work?
css, css-shapes, geometry, polygon
Solution
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 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.
Problem
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?
Related problems
- What are the HTML entities for up and down triangles?
- CSS Triangles in React Native no longer working
- Do I use <img>, <object>, or <embed> for SVG files?
- Height equal to dynamic width (CSS fluid layout)
- How can I create a "tooltip tail" using pure CSS?
- How to create a transparent triangle with border using CSS?