Drawing Triangles in CSS

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>

Drawing Triangles in CSS - Frame

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;  

Drawing Triangles in CSS - Beveled Frame

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?

Drawing Triangles with CSS - Beveled Box

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.

Cropped Beveled Box

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

Triangle from Bevel


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

Different Triangle

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


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!

This website uses cookies

These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Please consent to the use of cookies before continuing to browse our site.

Like What You See?

Got any questions?