How to draw triangles with conic-gradient in css

This article will explain in detail how css uses conic-gradient to draw triangles. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

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:

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.

.normal {background: conic-gradient (from 90deg at 50 0, deeppink 0, deeppink 45deg, transparent 45.1deg);}. Acute {background: conic-gradient (from 90deg at 50 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);}

This is the end of this article on "how css uses conic-gradient to draw triangles". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.