A commonplace technique for implementing triangles using CSS (multiple methods)

In some interview experiences, you can often see questions about CSS, and there will be a question about how to use CSS to draw a triangle, and the common answer is usually only to use border to draw it.

As CSS has developed to this day, there are actually many interesting ways to draw triangles using only CSS. This article will list them in detail.

In this article, you can learn 6 ways to draw triangles using CSS, and they are all very easy to master.

Of course, this article is just a starting point. CSS is changing with each passing day. There may be some interesting methods that are missing from this article. You are welcome to add them in the comment area~

Draw a triangle using border

Most people should be able to use borders to implement triangles, and it often appears in various face-to-face experiences. It is implemented by using a container with zero height and width and a transparent border.

The simple code is as follows:

div {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

For a container with zero height and width, set borders of different colors:

In this way, if the border color of any three sides is transparent , it is very easy to get triangles of various angles:

CodePen Demo - Triangle using border

Draw a triangle using linear-gradient

Next, we use linear-gradient to create the triangle.

Its principle is also very simple. We implement a 45° gradient:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
} 

Change its color from a gradient to two fixed colors:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
} 

Then make one of the colors transparent:

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
} 

By rotate or scale , we can also get triangles of various angles and sizes. The complete demo can be found here:

CodePen Demo - Triangle using linear gradient

Draw a triangle using conic-gradient

Still using gradient, we used linear gradient to realize triangle above. Interestingly, in the gradient family, conic-gradient can also be used to realize triangle.

The method is that the center point of the angular gradient can be set, similar to the center point of the radial gradient.

We set the center point of the angular gradient to 50% 0 , which is center top , the middle of the top of the container, and then perform an angular gradient. Within a certain angle range, the gradient becomes a triangular shape.

Suppose we have a container with a height and width of 200px x 100px , and set its angular gradient center point to 50% 0 :

Also, set it to draw the angle gradient map starting from 90° , as shown below:

It can be seen that at the beginning, the angular gradient shape is a triangle before it reaches the second edge. We can easily get a triangle by selecting a suitable angle:

div {
    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
} 

The extra 0.1deg in deeppink 45deg, transparent 45.1deg in the above code is to simply eliminate the effect of aliasing caused by the gradient. In this way, we can easily get a triangle through conic-gradient .

Similarly, with the help of rotate or scale , we can also get triangles of various angles and sizes. The complete demo can be found here:

CodePen Demo - Triangle using angular gradient

transform: rotate with overflow: hidden to draw a triangle

This method is relatively conventional, using transform: rotate with overflow: hidden . You can understand it at a glance and learn it in one go. The simple animation diagram is as follows:

Set the center of rotation of the graphic to the left bottom and rotate it, with overflow: hidden .

Complete code:

.triangle {
    width: 141px;
    height: 100px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
    }
}

CodePen Demo - transform: rotate with overflow: hidden to create a triangle

Using clip-path to draw a triangle

clip-path is a very interesting CSS property.

clip-path CSS property creates a clipping region where only part of an element is visible. The part inside the area is displayed, and the part outside the area is hidden. The clipping region is defined by a path referenced either by an embedded URL or by an external SVG path.

In other words, using clip-path we can clip a container into any shape we want.

Through 3 coordinate points, a polygon is realized, and the extra space will be cut off. The code is also very simple:

div {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
} 

CodePen Demo - Triangle using clip-path

In this website - CSS clip-path maker, you can quickly create simple clip-path graphics and get the corresponding CSS code.

Draw a triangle using characters

OK, the last one, which is a bit unique, is to use a character to represent a triangle.

Listed below are the decimal Unicode representations of some triangle-shaped characters.

◄ : ◄ 
► : ► 
▼ : ▼ 
▲: ▲
⊿ : ⊿
△ : △

For example, we use ▼ to implement a triangle▼, the code is as follows:

<div class="normal">&#9660; </div>

div {
    font-size: 100px;
    color: deeppink;
}

The effect is still good:

However, it should be noted that the use of character representation triangles is strongly related to the currently set font. Different fonts draw the same character differently. I randomly selected several different fonts on Google Font to represent the same character, and the results are as follows:

As you can see, different fonts have different shapes, sizes, and baselines, so if you want to use a glyph triangle, make sure the user's browser has the font you specify installed. Otherwise, don't use this method.

For the complete comparison demo, you can click here:

CodePen Demo - Implementing a triangle using characters

at last

Well, this is the end of this article. I hope this article will be helpful to you about the 6 different ways to draw triangles using CSS.

If you want to get the most interesting CSS information, don’t miss my official account - iCSS front-end news 😄

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

This concludes this article about the old-fashioned techniques for implementing triangles using CSS (in various ways). For more content on techniques for implementing triangles with CSS, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!