[Interview Skills] The old-fashioned n techniques for using CSS to achieve triangles

In some facets, you can often see a question about CSS, how to use CSS to draw a triangle , and the usual answer is usually only the use of border to draw a method.

With the development of CSS to this day, there are actually many interesting ways to draw triangles using only CSS. This article will list them in detail.

Through this article, you can learn about 6 ways to draw triangles using CSS, and they are all very easy to master. Of course, this article is just an introduction. CSS is changing with each passing day. There may be some interesting methods that have been missed in this article. Welcome to add in the message area~

Use border to draw triangles

The use of borders to implement triangles should be mastered by most people, and it is also often seen in various surface classics, using containers with zero height and width and transparent borders.

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 a height and width of zero, set borders of different colors:

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

CodePen Demo-Use border to achieve triangle

Use linear-gradient to draw triangles

Next, we use the linear gradient linear-gradient achieve the triangle.

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

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

Let its color change from a gradient to two fixed colors:

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

Make one of the colors transparent again:

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

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

CodePen Demo-Use linear gradient to achieve triangle

Use conic-gradient to draw triangles

Or gradient, we used linear gradient to achieve triangle, interestingly, in the gradient family, angular gradient conic-gradient can also be used to achieve triangle.

Method consists, corner to the center point of the gradation can be provided , similar to the center point of the radial gradient may also be provided.

We set the center point of the angular gradient at 50% 0 , that is, center top , and in the middle of the uppermost part of the container, the angular gradient is then changed to a certain angle range, all of which are triangular shapes.

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

And, set it to draw an 90° gradient from 06077b341cf656. The schematic diagram is as follows:

It can be seen that at the beginning, the angular gradient graphics are all triangles before the second side. We choose a suitable angle, and it is very easy to get a triangle:

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

The above code deeppink 45deg, transparent 45.1deg extra 0.1deg is to simply eliminate the influence of the gradient generated by jagged, so that we passed conic-gradient , also easy to get a triangle.

In the same way, with the rotation of rotate or scale , we can also get triangles of various angles and sizes. The complete Demo can be clicked here:

CodePen Demo-Use angular gradient to achieve triangle

transform: rotate with overflow: hidden to draw triangles

This method is quite conventional, using transform: rotate with overflow: hidden . You can understand at a glance, and learn at a glance. A simple animation diagram is as follows:

Set the rotation center of the graphic at left bottom in the lower left corner, and rotate it to match overflow: hidden .

The 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 achieve triangle

Use clip-path to draw triangles

clip-path A very interesting CSS property.

clip-path CSS property can create a clipping area where only part of the element can be displayed. Part of the area is displayed, and the area outside is hidden. The clipping area is the path defined by the referenced embedded URL or the path of the external SVG.

In other words, using clip-path can cut a container into whatever we want.

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

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

CodePen Demo-Use clip-path to implement triangle

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

Use characters to draw triangles

OK, the last one, somewhat unique, is to use characters to represent triangles.

The decimal Unicode representation codes of some triangle-shaped characters are listed below.

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

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

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

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

The effect is good:

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

As you can see, different fonts have different shapes, sizes and baselines, so if you want to use character triangles, make sure that the user's browser installs the font you specify, otherwise, don't use this method.

For the complete comparison Demo, you can click here:

CodePen Demo-Use characters to implement triangles

At last

Alright, this concludes this article, about 6 different ways to draw triangles using CSS, I hope it will help you :)

Want to get the most interesting CSS information, don’t miss my public - 16077b341cfab1 iCSS front-end facts 16077b341cfab2 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.