CSS Triangle All Types

I was recently using a lot of triangles in my projects, so I decided today to show you how to make a pure CSS triangle. It’s an easy trick based on styling the borders by making them thick and playing with the transparency and the border width.

I will show you how to make all possible types of triangles I mean all the eight types :

  • Top direction triangle
  • Bottom direction triangle
  • Left direction triangle
  • Right direction triangle
  • Top left direction triangle
  • Top right direction triangle
  • Bottom left direction triangle
  • Bottom Right direction triangle

So let’s jump in!!

1.Top direction triangle

css triangle

To make a top direction triangle we need to give a border-width of 50px for the borders right, bottom, and left and a zero width to the border top we also need to make all borders color transparent expect the bottom one you can give it any color you want.

 


<div class="triangle-top"></div>

.triangle-top {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 50px;
    border-color: transparent  transparent #ffc600  transparent ;
}

2.Bottom direction triangle

css triangle bottom direction

To make a Bottom direction triangle we need to give a border-width of 50px for the borders top, right, and left and a zero width to the border bottom we also need to make all borders color transparent expect the top one you can give it any color you want.

 

.triangle-bottom {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 50px;
    border-color: #ffc600 #222  transparent  #222;
}

3.Left direction triangle

css triangle left direction

To make a Left direction triangle we need to give a border-width of 50px for the borders top, right, and bottom and a zero width to the border left we also need to make all borders color transparent expect the right one you can give it any color you want.

.triangle-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: transparent #ffc600 transparent transparent;
}

4.Right direction triangle

css triangle right direction

To make a Right direction triangle we need to give a border-width of 50px for the borders top, left, and bottom and a zero width to the border right we also need to make all borders color transparent expect the left one you can give it any color you want.

.triangle-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 50px 50px;
    border-color: transparent  transparent  transparent #ffc600;
}

5.Top Left direction triangle

css triangle top left direcion

This one is a little bit different. We need to give a border-width of 50px for the borders top, and right and a zero width to the border bottom and left we also need to make all borders color transparent expect the top one you can give it any color you want.

.triangle-top-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width:  50px 50px 0 0;
    border-color: #ffc600 transparent transparent transparent;
}

6.Top right direction triangle

css triangle top right direction

To make a Top Right direction triangle We need to give a border-width of 50px for the borders right, and bottom and a zero width to the border top and left we also need to make all borders color transparent expect the right one you can give it any color you want.

.triangle-top-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent #ffc600 transparent transparent;
}

7.Bottom right direction triangle

css triangle bottom right direction

To make a Bottom Right direction triangle We need to give a border-width of 50px for the borders bottom and left and a zero width to the border top and right we also need to make all borders color transparent expect the bottom one you can give it any color you want.

.triangle-bottom-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent #ffc600 transparent;
}

8.Bottom left direction triangle

css triangle bottom left direction

To make a Bottom Left direction triangle We need to give a border-width of 50px for the borders top and left and a zero width to the border right and bottom we also need to make all borders color transparent expect the left one you can give it any color you want.

.triangle-bottom-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent #ffc600 transparent;
}

That’s it this will help you understand how CSS triangle works. I’ll do more tutorials about the CSS triangle so stay tuned and don’t forget to subscribe to my newsletter.

Leave a reply:

Your email address will not be published.

Site Footer