4 Easy Ways To Create Triangles In HTML CSS

Welcome to a quick tutorial on how to create triangles in HTML and CSS. Need to add some triangles to your webpage? Well, ever since the introduction of HTML5 and CSS3, triangles are no longer limited to images.

One of the fastest ways to create triangles is to use HTML symbols:

  • Up Triangle – ▲ 
  • Down Triangle – ▼ 
  • Left Triangle – ◀
  • Right Triangle – ▶

But there are actually a few more pure HTML and CSS ways to do it – We shall walk through a few examples in this guide, read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Create Triangles Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

HOW TO CREATE TRIANGLES

All right, let us now walk through the various ways to create a triangle in HTML and CSS.

 

1) CSS TRIANGLE

THE SCRIPT

1-css-triangle.html
<style>
  .triangle-up {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
  }
  .triangle-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid green;
  }
  .triangle-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid blue;
  }
  .triangle-left {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 30px solid magenta;
  }
</style>

<strong>Up Triangle</strong>
<div class="triangle-up"></div>
 
<strong>Down Triangle</strong>
<div class="triangle-down"></div>
 
<strong>Right Triangle</strong>
<div class="triangle-right"></div>
 
<strong>Left Triangle</strong>
<div class="triangle-left"></div>

 

THE EXPLANATION

My first reaction to this “magic CSS triangle” was – What kind of sorcery is this? How did the CSS border transform into a triangle? As it turns out, it is actually quite a simple trick:

Yep. The borders surrounding HTML elements are actually “cut” at 45 degrees around the corners. This gives us the perfect opportunity to create triangles.

 

 

2) HTML TRIANGLE SYMBOL

THE SCRIPT

2-html-symbol.html
<style>
  /* HTML Symbols can be styled just like text */
  .up-sym {
    font-size: 1.3em;
    color: red;
  }
  .down-sym {
    font-size: 1.4em;
    font-weight: bold;
    color: green;
  }
  .left-sym {
    font-size: 1.5em;
    text-decoration: underline;
    color: blue;
  }
  .right-sym {
    font-size: 1.6em;
    font-style: italic;
    color: maroon;
  }
</style>

<div class="up-sym">
  &#9650; Up Triangle
</div>
<div class="down-sym">
  &#9660; Down Triangle
</div>
<div class="left-sym">
  &#9664; Left Triangle
</div>
<div class="right-sym">
  &#9654; Right Triangle
</div>
▲ Up Triangle
▼ Down Triangle
◀ Left Triangle
▶ Right Triangle

 

THE EXPLANATION

For those who have not heard, HTML symbols can be easily defined using &#NUMBER;, and there are a ton of these HTML symbols – Arrows, trademark, copyright, currencies, Math, smilies, and of course, triangles.

If the CSS magic triangle too much of a hassle, then just use one of these HTML triangle symbols. The best part is that they are treated as text, and can be styled using any CSS text property. I will leave links in the extra section below for a long list of HTML symbols.

 

3) TRIANGLE SYMBOL ON BEFORE & AFTER

3-more-symbol.html
<style>
  .arrows:before {
    content: '\25B6';
    padding-right: 10px;
  }
  .arrows:after {
    content: '\25C0';
    padding-left: 10px;
  }
  .arrows {
    font-size: 1.5em;
    color: red;
    text-decoration: none;
  }
</style>
 
<a class="arrows" href="#">Click Here!</a>

 

This is kind of a follow up from the above. We can apply the HTML triangle symbol  to both :before and :after of an element, quickly create “click here now” or “check this out” buttons.

 

 

4) TRIANGLE IMAGE

4-image.html
<img src="ico-triangle.svg"/> 
The Old School Triangle Image!

The Old School Triangle Image!

 

Well, Captain Obvious to the rescue. The good old school way of using a triangle image.

 

EXTRA – ANIMATION

5-animate.html
<style>
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .playbtn {
    display: inline-block;
    padding: 10px;
    background: #e0e0e0;
    cursor: pointer;
  }
  .playbtn img {
    width: 32px;
    height: 32px;
  }
  .playbtn:hover img {
    animation-duration: 0.5s;
    animation-name: spin;
    aniamtion-timing-function: linear;
  }
</style>

<div class="playbtn">
  <img src="ico-triangle.svg" /> Play Now
</div>
Play Now

 

Finally, here is a small Easter Egg if you want to call it… With a little bit of CSS animation magic, we can create spinning buttons and add a little bit of interest to otherwise boring buttons.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

How To Create Triangles In HTML CSS (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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