Drawing Triangles in CSS

In 3-ish Easy Steps

Our goal is to draw a simple equilateral triangle. Before we begin, it might help to visualize how we are going to accomplish this first.

Step 1 – Picture a Frame

Think of a framed picture. It is basically a square surrounded by a border. Or, in our case, a <div> surrounded by a border:

<div class=”triangle”></div>

Just like in real life, picture frames (borders) are mitered at the corners. That is, the four edges of the frame meet each other at an angle :

.triangle {
    width        : 200px;
    height       : 200px;
    border       : 10px solid;
    border-color : #666 #ccc #aaa #888;  
}

Step 2 – Remove the Picture

What would our framed picture look like if we removed the picture in the middle and allowed the frame itself to occupy the entire space?

That’s right. Triangles.

.triangle {
    width        : 0;
    height       : 0;
    border       : 100px solid;
    border-color : #666 #ccc #aaa #888;  
}

Step 3 – Choose a Side

Since our goal is to create a single triangle and not four, we can remove one of the border sides. Let’s get rid of the top one.

.triangle {
    width         : 0;
    height        : 0;
    border-left   : 100px solid #888;
    border-right  : 100px solid #ccc;  
    border-bottom : 100px solid #aaa;
}

We’re almost there. Let’s make the left and right borders transparent.

Voila!

.triangle {
    width         : 0;
    height        : 0;
    border-left   : 100px solid transparent;
    border-right  : 100px solid transparent;  
    border-bottom : 100px solid #aaa;
}

Step 4 – Adjust the Shape

The looks of our triangle can be adjusted in many ways.

• We can skew the frame by varying the widths of the border pieces.
• We can obviously change the color.
• We can also rotate the div to change the triangle’s orientation.

.triangle {
    width         : 0;
    height        : 0;
    transform     : rotate(33deg);    
    border-left   : 25px solid transparent;
    border-right  : 250px solid transparent;  
    border-bottom : 100px solid #358;
}

Step 5 – Make Corrections

In Browser-land (™) there are always small exceptions to handle:

• If you find your triangle has jagged lines instead of smooth ones, you can try changing the border-style of the transparent sides to dashed or inset. You can also try adding a transform: rotate(360deg) or transform: scale(1). Both of which should kick in anti-aliasing.
• If you are having trouble in older versions of IE, you can try adding line-height: 0px;
• IE and some versions of WebKit need to use rgba(255, 255, 255, 0) instead of the transparent border color.

Summary

Play around with this code, change the settings and make the knowledge your own. Also, our goal was to create an equilateral triangle. Technically, the grey one in step 3 is an isosceles. So for those of you who are feeling geometrically OCD, change the blue triangle up above to be equilateral.

I hope you found this post helpful and as always, if you have any comments or ideas to share, please leave them below or look me up on Twitter!