Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Labs
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Labs
  • Careers
  • Contact
September 15, 2016

Drawing Triangles in CSS

DevOps

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

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.

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.

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!

Posted in DevOps
Share this

Timothy Eagan

Timothy Eagan was a Senior Engineer at Modus Create, and is an accomplished software developer with over 20 years of experience in creating customized business solutions. He can be found in Providence, RI. Tim is also an OIF veteran, former paperboy and part-time comedian.
Follow

Related Posts

  • How To Fix Overflow Issues in CSS Flex Layouts
    How to Fix Overflow Issues in CSS Flex Layouts

    Want to read the how-to? Continue below! ----- I recently ran into an odd overflow…

  • Efficient DOM and CSS Operations
    Efficient DOM and CSS Operations

    Eventually, the output of our web applications end up displayed as a part of user…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top