How Do Css Triangles Work?

Question

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?

Accepted 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 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.

Answer 2

The borders use an angled edge where they intersect (45° angle with equal width borders, but changing the border widths can skew the angle).

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

Have a look to the jsFiddle.

By hiding certain borders, you can get the triangle effect (as you can see above by making the different portions different colours). transparent is often used as an edge colour to achieve the triangle shape.

Answer 3

Start with a basic square and borders. Each border will be given a different color so we can tell them apart:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

which gives you this:

But there's no need for the top border, so set its width to 0px. Now our border-bottom of 200px will make our triangle 200px tall.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

and we will get this:

Then to hide the two side triangles, set the border-color to transparent. Since the top-border has been effectively deleted, we can set the border-top-color to transparent as well.

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

finally we get this:

Answer 4

Must Read

Different approach: CSS3 triangles with transform rotate

Triangular shape is pretty easy to make using this technique. For people who prefer to see an animation explaining how this technique works here it is :

Link to the ANIMATION : How to make a CSS3 triangle.
And DEMO : CSS3 triangles made with transform rotate.

Otherwise, here is detailed explanation in 4 acts (this is not a tragedy) of how to make an isosceles right-angled triangle with one element.

Note 1 : for non isosceles triangles and fancy stuff, you can see step 4.
Note 2 : in the following snippets, the vendor prefixes aren't included. they are included in the codepen demos.
Note 3 : the HTML for the following explanation is always : <div class="tr"></div>

How Do Css Triangles Work?

22 Answers

CSS Triangles: A Tragedy in Five Acts

Must Read

Different approach: CSS3 triangles with transform rotate

David Miller