Create a Triangle shape using CSS

Have you ever wondering how to create a triangle by only using css and HTML? If you already know but doesn’t have an idea to implement that properly this article is for you.

Let’s create a 100 x 100 div and make it colour black. Then try to add 4 different colours to borders like green, yellow, red, purple.

Now you can see a square with 4 borders. Check the shape of the border. It’s like an angle in both corners. Then we can set the width and height to zero to keep only the borders. And remove the background colour. Now you can see a small square with 4 triangle shapes right?

 .triangle{
            width:0px;
            height:0px;
            background:black;
            border:20px solid;
            border-top-color: red;
            border-left-color: green;
            border-right-color: blue;
            border-bottom-color: purple;
        }
  <div class="triangle"></div>

Now you need only need to change the colours to transparent and keep only the required shape.

Right triangle

keep the colour of the left border and make other transparent.

       .triangle-right{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right"></div>

Top triangle

keep the colour of the bottom border and make other transparent.

      .triangle-top{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
        }
        <div class="triangle-top"></div>

Left triangle

keep the colour of the right border and make other transparent.

       .triangle-left{
                width:0px;
                height:0px;
                border:10px solid;
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: blue;
                border-bottom-color: transparent;
        }
        <div class="triangle-left"></div>

Bottom triangle

keep the colour of the top border and make other transparent.

        .triangle-bottom{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-bottom"></div>

 

Increase the size of the triangle.

By changing the border size, you can increase the size of the triangle

      .triangle-right{
            width:0px;
            height:0px;
            border:20px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right"></div>

 

Rotate triangle.

You can use transform property set the rotation as you need.

        .triangle-rotate{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
            transform: rotate(20deg);
        }
        <div class="triangle-rotate"></div>

 

Add a triangle to end of div

Adding triangle to end of the div sometimes seems confusing. You can use :after selector to add a style to the end of a div. When adding an arrow to bottom we need to keep the top border and make other borders transparent. In this div, the width has been set as 100px. Then the left and the right border have to be half of size of the div. Also by changing the top border height, you can change the height of the triangle.

        .triangle-after{
            width: 100px;
            height: 50px;
            background: black;
            position: relative;
        }

        .triangle-after:after{
            content: "";
            position: absolute;
            width:0;
            height:0;
            top: 100%;
            border-top: solid 10px #e15915;
            border-left: solid 50px transparent;
            border-right: solid 50px transparent;
            border-bottom: solid 10px transparent;
        }
        <div class="triangle-after"></div>

Originally published at mightytechno

Connect with me - Instagram |Blog |Youtube