Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to draw triangles with CSS". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Use border to draw triangles

The realization of triangles using border should be mastered by most people, and it often appears in all kinds of sutras, using a container with zero height and width and a 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;}

For containers with zero height and width, set border of different colors:

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

CodePen Demo-use border to implement triangles [1]

Use linear-gradient to draw triangles

Then, we use the linear gradient linear-gradient to realize the triangle.

Its principle is also very simple, we achieve 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%);}

Just make one of the colors transparent:

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

By rotating rotate or scale, we can also get triangles of different angles and sizes, and the complete Demo can be stamped here:

CodePen Demo-triangles using linear gradients [2]

Use conic-gradient to draw triangles

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

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

We set the center point of the angular gradient to 50%, that is, center top, the top middle of the container, and then proceed the angular gradient to a certain range of angles, all of which are triangular shapes.

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

Also, set it to draw an angular gradient from 90 °. The diagram is as follows:

Angular gradient animation

As you can see, at the beginning, the angular gradient figure is all triangles before the second side. If we choose the appropriate angle, it is very easy to get a triangle.

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

Triangle realized by conic-gradient

The deeppink 45deg in the above code, the extra 0.1deg in transparent 45.1deg is to simply eliminate the influence of aliasing produced by the gradient, so that we can easily get a triangle through conic-gradient.

By the same token, when combined with rotating rotate or scale, we can also get triangles of various angles and sizes. The complete Demo can be stamped here:

CodePen Demo-use angular gradient to realize triangles [3]

Drawing triangles with transform: rotate and overflow: hidden

This method is relatively conventional, using transform: rotate with overflow: hidden. You can understand it as soon as you see it, and you can learn it as soon as you learn. the simple animation diagram is as follows:

Set the rotation center of the drawing in the lower left corner left bottom, rotate, with overflow: hidden.

The complete code:

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 cooperates with overflow: hidden to realize triangle [4]

Use clip-path to draw triangles

A very interesting CSS attribute for clip-path.

The clip-path CSS attribute creates a clipping area that can be displayed only in portions of the element. The part within the area shows that it is hidden outside the area. The cut area is the path defined by the referenced embedded URL or the path to the external SVG.

That is, you can use clip-path to tailor a container to anything we want.

Through three coordinate points, a polygon is realized, the extra space is cut out, and the code is very simple:

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

Triangle realized by clip-path

CodePen Demo-use clip-path to implement triangles [5]

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

Draw triangles using characters

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

The following lists some decimal Unicode representations of triangle-shaped characters.

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

For example, we use ▼ to implement a triangular ▼ with the following code:

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

The effect is good:

Triangles realized by characters

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

As you can see, the shape, size and baseline of different fonts are different, so if you want to use character triangles, make sure the user's browser installs the font you specify, otherwise, don't use it.

This is the end of "how to draw triangles with CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.