Understand how to create triangles with CSS

I’ve been creating css shapes for a while now, but just recently I’ve been starting to wonder how does the technique actually work and why.

You can find a good collection of css snipets here. Most shapes use css 3 properties but there are a few useful ones that do not require css 3 so you don’t have to worry about browser compatibility.

How to create a triangle with css

1
2
3
4
5
6
7

#right-triangle {
   width: 0;
   height: 0;
   border-left: 60px solid red;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
}

The css behind it is pretty simple but what I wanted to find out was why did it work, and with a bit of research I managed to figure it out!

Understanding how borders are drawn by the browser

Let’s start with a basic example. A 30px square with 1px solid black border:

1
2
3
4
5

#square {
   width: 30px;
   height: 30px;
   border:1px solid black;
}

So the result is what we would expect but there is one thing that should be noted: border is drawn outside of the element so the shape has 32px x 32px. Basic stuff so far.

Let’s increase the border width to 60px.

1
2
3
4
5

#square {
   width: 30px;
   height: 30px;
   border:60px solid black;
}

Again nothing special, and the shape has 150px x 150px now.

But what happens when all the borders have different colors?

1
2
3
4
5
6
7
8

#square {
   width: 30px;
   height: 30px;
   border-top:60px solid green;
   border-right:60px solid blue;
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

What most people don’t realize is that borders are drawn at an angle where they join, as you can clearly see above. This is the main reason why we can create triangles with css, but let’s fill in the remaining steps.

Let’s make triangles

What if we give a width and height of 0px and just leave the borders?

1
2
3
4
5
6
7
8

#square {
   width: 0px;
   height: 0px;
   border-top:60px solid green;
   border-right:60px solid blue;
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

We are left with a 120px x 120px shape composed of 4 triangles corresponding to the 4 borders. It has 120px width because both left and right borders have 60px each and 120px height because both top and bottom borders have also 60px.

If we focus on the red triangle we see that it has a 120px left base equal to the height of the shape (top border plus bottom border) and a 60px “height” equal to half the width of the entire shape ( or equal to the left border’s width).

Lets start removing triangles from the shape except the red one. From the paragraph above we see that the blue right border doesn’t really affect the red triangle. So let’s just remove it.

1
2
3
4
5
6
7

#square {
   width: 0px;
   height: 0px;
   border-top:60px solid green;  
   border-bottom:60px solid yellow;
   border-left:60px solid red;
}

Our shape now has 60px by 120px and the red triangle is intact. That’s a relief 🙂 We can not remove any more triangles because the red one will be affected but we can make them transparent:

1
2
3
4
5
6
7

#right-triangle{
   width: 0px;
   height: 0px;
   border-top:60px solid transparent;  
   border-bottom:60px solid transparent;
   border-left:60px solid red;
}

Mission accomplished! We only have the red triangle, but it’s not exactly the same as the first example. This one has a base of 120px and height of 60px and the first one had 60px base and 60px height. As we previously said the base of the triangle is equal to the height of the shape, so let’s reduce the height. We do that by modifying the width of the top and bottom borders in half.

1
2
3
4
5
6
7

#right-triangle{
   width: 0px;
   height: 0px;
   border-top:30px solid transparent;  
   border-bottom:30px solid transparent;
   border-left:60px solid red;
}

We are finally done!

I hope that this article answered your curiosity, if you had any about css triangles.