How to create a triangle with pure CSS?

One of the easiest ways to add a triangle or any other shape in a web page is to simply draw it in an image and then add this image to your web page.

But that’s not probably the best approach as the images are larger in size and adding them to your web page might increase the loading time which can ultimately lead to a poor user experience.

Keeping all these factors in mind, we will draw a triangle with pure CSS, which will not affect the loading time at all.

In this tutorial, we will discuss two easy methods of creating a triangle with pure CSS. These two methods are as follows:

• Create a triangle using CSS border properties
• Create a triangle using CSS clip-path property

Let’s discuss each method in detail:

1. Create a triangle using CSS borders

This is the easiest method to achieve our goal. It needs 4 easy steps to create an equilateral triangle in CSS:

• Step 1: Make a thick border around the element. The thickness of the border must be far more greater then its width and height.
• Step 2: Set its width and height to 0px.
• Step 3: Set the thickness of the top border to 0px and double the thickness of the bottom border.
• Step 4: Make left and right borders transparent.

Here is a visual representation of all four steps:

Here is a working example:

Example:

.triangle{
    border-top: 0px solid;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 180px solid red;
    width: 0px;
    height: 0px;
}

As we have understood the basic concept of creating a triangle. We can now draw other variants of triangles as well by manipulating the four sides borders.

Here is a visual representation of creating a right-angled triangle:

Here is a working example:

Example:

.triangle{
   border-right: 90px solid red;
   border-bottom: 90px solid red;
   border-left: 90px solid transparent;
   border-top: 90px solid transparent;
   width: 0px;
   height: 0px;
}

2. Create a triangle using CSS clip-path Property

CSS clip-path property is always the best choice for creating any kind of shape in CSS. Like the previous method, here we don’t have to manipulate the element’s borders to create the triangle.

The clip-path property lets you extract any desired shape from the actual element with the help of some built-in functions. The dimensions of the extracted shape are defined using percentage(%) values by taking the actual element as a reference.

To draw a triangle, we will take the help of the built-in polygon() function. This function can take 1 to n number of arguments, where each argument denotes the vertices of the shape that is to be extracted.

For example, if we want to extract a triangle from a div element having a width of 200px and height of 200px, we have to define three vertices of the triangle as A(50%, 0%), B(100%, 100%) & C(0%, 100%).

See the image below:

Here is a working example with code:

Example:

.triangle{
    width: 200px;
    height: 200px;
    background-color: red;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

As I previously said, the clip-path property is not just restricted to triangles only. You can draw any shape with it.

In the below example code, we have drawn a pentagon using the clip-path property:

Example:

.pentagon{
    width: 200px;
    height: 200px;
    background-color: red;
    clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}