Understand how to create triangles with CSS

Madalin Ungureanu
Last Updated: 05/12/11

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.

4 thoughts on “Understand how to create triangles with CSS

    This was a really informative tutorial.

    Because I’m a nerd, though, I have to point out that this is actually an equilateral triangle, not a right triangle. A right triangle has one 90 degree angle, making one side longer than the other two.

    Equilateral triangles have the same length on all sides.

    I think I’ve made my point, so I won’t bother talking about isosceles triangles. 🙂

    If you’re a nerd, like me, you can go to Wolfram Mathworld (not my site) to learn more.

    Reply

    Not nerd enough Drew. The triangles in the examples aren’t equilateral, they are isosceles, they only have two sides the same length (and thus two angles the same).

    Reply

    […] obliged to Jon Rohan for the tutorial.  There are also other great demonstrations, if you are so inclined. Tags: css, css triangles, design /* Cufon.now(); var […]

    Reply

    Also the id is “right-triangle” as to mean a “right-pointing triangle” and not a right-angled triangle…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.