How to draw a triangle using CSS

In this tutorial, we will learn how to draw a triangle using CSS. So Cascading Style Sheet(CSS) has many applications which are used by most of the web developers.

We use external styling to write the code as it is easy to understand. So at first, we start by creating a square in our output window. It can be done by simply specifying height and width in equal values to make a square. For example 30 pixels for each.

Code to draw a triangle using CSS

Triangle.html file

<html>
<head>
  <title>Make triangle using CSS</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="tri">
</div>
</body>
</html>

Style.css file

.tri{
  width:0px;
  height:0px;
  /*background-color: red;
  border-top:60px solid blue;*/

  border-right:60px solid transparent;
  border-bottom:60px solid yellow;
  border-left:60px solid transparent;

}

We then set its border in pixels that set the border of our square from all sides. We then set the border of the left, right, top, bottom to different colors. And set height and width to zero so this gives is a square divided into four triangles.

Now, all we have to do is to separate these four triangles. So we name the background color as default. And also we remove the upper triangle by making the value of the top border as zero. Now we have only one work left to remove the side two triangles.

So for that, we add a keyword to them and make them transparent. After making the right and left triangle transparent we are left with only the bottom triangle. Magic isn’t it. We have converted square into a triangle.

You may also read,

Leave a Reply

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