CSS provides three excellent ways to achieve basic shapes. This article looks at how to use these methods to implement a triangle. The three methods are as follows:

  • Border;
  • Linear gradient;
  • Clip – path.

1. border

The first way to draw a triangle using CSS is to use the border property.

Given an element with a width and height of 0, any value of its border directly intersects, and we can use this intersection to create a triangle. That is, the border property is made up of triangles, and each side is given a different border color:

.triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
Copy the code

Setting both the length and width of the element to 0 looks like this:

As you can see, we’ve basically achieved four triangle shapes. So you can draw triangles based on the border property.

If you want a triangle pointing to the bottom, make the top of the border visible and all other edges transparent:

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
Copy the code

If you want a triangle that points to the right, make the left side of the border visible and all other sides transparent:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid skyblue;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}
Copy the code

The above code could also be written like this:

.triangle {
	border-style: solid;
  border-color: transparent;
  border-width: 50px 0 50px 50px;
  border-left-color: skyblue;
}
Copy the code

We can also make triangles of different directions and sizes by adjusting the values of the borders in different directions:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 100px solid transparent;
}
Copy the code

Of course, it is also possible to implement an equilateral triangle:

.triangle {
		width: 0;
		height: 0;
		border-left: 69px solid transparent;  
		border-right: 69px solid transparent;  
		border-bottom: 120px solid skyblue; 
}
Copy the code

2. linear-gradient

Linear-gradient needs to combine background-Image to achieve a triangle. Here is how to use gradient step by step to achieve a triangle.

First, let’s draw a rectangle:

.triangle {
  width: 80px;
  height: 100px;
  background-repeat: no-repeat;
  outline: 1px solid skyblue;
}
Copy the code

The effect is as follows:

Next, add a gradient that will make half of the element red:

background-image: linear-gradient(45deg, orangered 50%.rgba(255.255.255.0) 50%);
Copy the code

The effect is as follows:

Our goal is to create a triangle that looks the same as when we used the border method. Therefore, background-size and background-position values need to be adjusted:

background-size: 100% 50%;
Copy the code

The effect is as follows:

Because the gradient is set at a 45 degree Angle, the shape looks strange. You need to adjust the Angle so that the top edge of the triangle starts at the top left corner and ends in the middle of the right. You can use the browser developer tools to debug until you have the desired effect. The linear-gradient value was updated as:

background-image: linear-gradient(32deg, orangered 50%.rgba(255.255.255.0) 50%);
Copy the code

The effect is as follows:

This is actually a triangle, but it’s not what we want. For linear gradients, we need to add multiple backgrounds to achieve triangles. Let’s add a mirror effect:

background-image: linear-gradient(32deg, orangered 50%.rgba(255.255.255.0) 50%), linear-gradient(148deg, orangered 50%.rgba(255.255.255.0) 50%);
Copy the code

The effect is as follows:

It seems to be a long way from the triangle, but as a last step, just adjust the position of the two triangles, using the background-position property:

background-position: top left, bottom left;
Copy the code

The effect is as follows:

This creates the triangle effect (just remove the outline), and the final code looks like this:

.triangle {
		width: 160px;
  	height: 200px;
  	outline: 2px solid skyblue;
  	background-repeat: no-repeat;
		background-image: linear-gradient(32deg, orangered 50%.rgba(255.255.255.0) 50%), linear-gradient(148deg, orangered 50%.rgba(255.255.255.0) 50%);
		background-size: 100% 50%;
		background-position: top left, bottom left;
}
Copy the code

CSS linear gradients can be used to create many shapes. However, it has the disadvantage that you need to debug the gradient Angle properly.

3. clip-path

The last approach, clip-path, is the most streamlined and extensible. However, the current browser compatibility is not very good, use to consider whether the browser support.

Let’s draw a rectangle with a background color:

.triangle {
  width: 80px;
  height: 100px;
  background-color: skyblue;
}
Copy the code

The effect is as follows:

Clip-path is used to draw polygons (or circles, ovals, etc.) and position them within elements. In fact, the browser does not draw any region beyond the clip-path, so what we see is the clip-path boundary.

Let’s draw a triangle pointing to the right:

clip-path: polygon(0 0.0% 100%.100% 50%);
Copy the code

Where does this value come from? Clip-path allows you to define coordinates for each point placed along the path. In this case, three points are defined: top-left (0 0), bottom-left (0% 100%), and right-center (100% 50%). The effect is as follows:

The complete code is as follows:

.triangle{
		margin: 100px;
		width: 160px;
  	height: 200px;
  	background-color: skyblue;
		clip-path: polygon(0 0.0% 100%.100% 50%);
}
Copy the code

You can try this property out using an online tool to draw a different graph: bennettfeely.com/clippy/

That’s the end of this article. What other ways do you know to implement triangles using pure CSS?