How do CSS triangles work?

css geometry polygon css-shapes
Stanislav Shabalin picture Stanislav Shabalin · Aug 16, 2011 · Viewed 174.5k times · Source

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:

CSS Triangle

How and why does it work?

Answer

sdleihssirhc picture sdleihssirhc · Aug 16, 2011

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.

Related questions

Easier way to create circle div than using an image?

I'm wondering if there's an easier way to create circular divs than what I'm doing now. Currently, I am just making an image for each different size, but it's annoying to do this. Is there anyway using CSS to make …

Read More
How to draw circle in html page?

How do you draw a circle using HTML5 and CSS3? Is it also possible to put text inside?

Read More
Circle button css

I'm a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt …

Read More