In some pages, it is common to see CSS questions will have a how to use CSS to draw a triangle, and the common answer is usually only using border to draw a method.

And CSS development to today, in fact, there are a lot of interesting use only CSS can be drawn out of the triangle, this article will be listed in detail.

In this article, you’ve learned six ways to draw triangles using CSS, and they’re all pretty easy to learn.

Of course, this article is just a piece of advice, CSS changes with each passing day, there may be some interesting methods omitted in this article, welcome to add ~ in the comment area

Draw the triangle using border

The use of border triangle implementation should be familiar to most people, and is often seen in various aspects, using the height and width of the zero container and transparent border implementation.

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;
}
Copy the code

For containers with height and width equal to zero, set a border with different colors:

Thus, it is very easy to get triangles of various angles by making any three sides transparent:

CodePen Demo – Implements triangles using border

Use Linear-gradient to draw a triangle

Next, we use linear gradient to implement the triangle.

The principle is also very simple, we implement a 45° gradient:

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

Change its color from gradient to two fixed colors:

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

Make one of the colors transparent:

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

With rotate or scale, we can also get triangles of different sizes and different angles. The full Demo can be seen here:

CodePen Demo – Use linear gradient to implement triangles

Use Conic-gradient to draw the triangle

Again, gradient, we used linear gradient to achieve triangles above. Interestingly, in the gradient family, conic-gradient can also be used to achieve triangles.

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

We set the center point of the angular gradient at 50% 0, which is the center top, the middle of the top of the container, and then perform the angular gradient to a certain Angle range, which is a triangle shape.

Suppose we have a container that is 200px x 100px high and wide and set its angular gradient center point to 50% 0:

Also, set it to draw an angular gradient from 90°, as shown below:

It can be seen that at the beginning, the angular gradient graph is a triangle until it reaches the second side. We can easily get a triangle by selecting the appropriate Angle:

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

The extra 0.1deg was added to simply eliminate the jagged effect of the gradient, which allowed us to use Conic-gradient to easily create a triangle.

With the same rotation as rotate or scale, we can have triangles of different sizes and angles. The full Demo can be seen here:

CodePen Demo – Use angular gradient to implement triangles

Transform: rotate Draws a triangle with Overflow: hidden

This method is fairly conventional, using transform: rotate with Overflow: Hidden. It is easy to understand and learn. The simple animation diagram is as follows:

Set the rotation center of the graphic to the bottom 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); }}Copy the code

CodePen demo-transform: rotate Implements triangles with overflow: Hidden

Use clip-path to draw triangles

Clip-path is an interesting CSS property.

The clip-path CSS property creates a clipping area where only parts of the element can be displayed. The part inside the region is displayed, and the part outside the region is hidden. The clipping area is the path that is referenced to the embedded URL definition or the path of the external SVG.

That is, clip-path lets you crop a container to anything you want.

With 3 coordinate points, a polygon is realized, the extra space is cut down, and the code is very simple:

div {
    background: deeppink;
    clip-path: polygon(0 0.100% 0.0 100%.0 0);
}
Copy the code

CodePen Demo – Use clip-path to implement triangles

In this website, CSS Clip-Path Maker, you can quickly create simple clip-Path graphics and get the corresponding CSS code.

Draws triangles using characters

OK, the last one, which is kind of unique, is the use of characters to represent triangles.

The decimal Unicode representation for some triangular shaped characters is listed below.

◄ : The & # 9668;For:The & # 9658; 
▼ : The & # 9660;Bring:The & # 9650;
⊿ : The & # 8895;Delta:The & # 9651;
Copy the code

For example, we use ▼ Implement a triangle ▼ with the following code:

<div class="normal">The & # 9660; </div>
Copy the code
div {
    font-size: 100px;
    color: deeppink;
}
Copy the code

The results are good:

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

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

For the full comparison Demo, you can poke here:

CodePen Demo – Use characters to implement triangles

The last

Well, that concludes this article about 6 different ways to draw triangles using CSS, which I hope will help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.