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

This article focuses on "using only one div with css to achieve pie chart", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use only one div with css to realize the pie chart.

Please slide to the end of the text for the complete code.

We use only one div and only css to implement the pie chart.

HTMl structure

60%

We added several variables for css:

-- p: the percentage of the progress bar (pure number, without%), and the pie chart value is consistent with the div content (with%).

-- b: the value of the border thickness

-- c: the body color of the border

This article uses abbreviated variables, and in order to achieve readability in a production environment, we should use-- p->-- percentage,-- b-border-thickness,-- c-main-color.

Basic settings of Pie

We set the basic style for the pie chart.

.pie {--w: 150px; / /-- w->-- width width: var (--w); aspect-ratio: 1; / / aspect ratio, 1 means square display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}

Above we use aspect-ratio: 1; make sure that div is square, of course, you can also use height: var (--w) to achieve the effect.

Next, we use pseudo elements to implement a simple pie chart:

.pie: before {content: ", position: absoute; border-radius: 50%; inset: 0; / knowledge point 1 background: conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0); / / knowledge point 2}

Knowledge point 1: inset: 0; equivalent to top: 0; right: 0; bottom: 0; top: 0

Knowledge point 2: conic-gradient cone gradient, css method, more, where # 0000 is the hexadecimal of transparent.

# 0000 Hex Color Red (0) Green (0) Blue (0)

After conic-gradient application:

In order to make the area that is only the border visible, we use the mask attribute to hide the middle circle. We will use the radial-gradient () method:

Radial-gradient (farthest-side,red calc (99%-var (--b)), blue calc (100%-var (--b))

After the above code is applied, the results are as follows:

Our goal is as follows:

We can do this by changing the code:

60%.pie {--wvar 150px; width: var (--w); aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}. Pie:before {content: "; position: absolute; border-radius: 50%; inset: 0 Background: conic-gradient (var (--c) calc (var (--p) * 1), # 0000 0);-webkit-mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b)); mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b) } add a circular edge

How to add a circular edge? take a look at the following illustration and you will understand this tip.

For the effect on the figure (1), the circle is placed at the beginning edge.

Pie: before {background: radial-gradient (farthest-side, var (--c) 98%, # 0000) top/var (--b) var (--b) no-repeat, conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0);}

For the effect on the figure (2), the circle is placed on the edge of the end.

Pipe: after {content: "; position: absolute; border-radius: 50%; inset: calc (50-var (--b) / 2); / / knowledge point 1 background: var (--c); transform: rotate (calc (var (--p) * 3.6deg)) translateY (calc (50-var (--w) / 2)); / / knowledge point 2}

Knowledge point 1: inset: 0; we also mentioned above-- it is an abbreviation for left: 0; right: 0; bottom: 0; top: 0;.

Here we have:

Left = right = 50%-bAccord 2

Here we move the element to the left and right by 50%-b stroke 2, which means that the element has a width of b and is centered left and right. For height, the same goes for it.

Knowledge point 2: calculation of degree of rotation

Angle = percentage * 360deg / 100

The element is rotated by the appropriate degree, and then its position is moved, which involves centering on the Y axis. It may be a little difficult to understand the text, combined with the following illustrations:

Add Animation

So far, we have implemented a still pie chart. Let's add a dynamic effect to it next.

Register the variable first:

@ property-- p {syntax:'; inherits: true; initial-value: 0;}

Next, we create keyframes:

@ keyframes p {from {--p: 0}}

Note: here we only need to set the-p value of from. Browsers will automatically match the values in our preset to (div class= "pie" style= "- pvv 60;" > 60%)

Finally, we call the animation.

Animation: p 1s .5s both

Hey hey ~ copy the following code and try it. Of course, we also provide the picture.

Code and effect diagram

20% 40% 60% 80% 90%@property-- p {syntax:'; inherits: true; initial-value: 1;}. Pie {--PVV 20;-- BRV 22px;-- CRAV Redder;-- WRV 150px; width: var (--w); aspect-ratio: 1; position: relative; display: inline-grid; margin: 5px; place-content: center; font-size: 25px; font-weight: bold; font-family: sans-serif } .pie: before,.pie:after {content: "; position: absolute; border-radius: 50%;} .pie:before {inset: 0; background: radial-gradient (farthest-side,var (--c) 98%) top/var (--b) var (--b) no-repeat, conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0) -webkit-mask: radial-gradient (farthest-side,#0000 calc (99%-var (--b)), # 000 calc (100%-var (--b)); mask: radial-gradient (farthest-side,#0000 calc (99%-var (--b)), # 000 calc (100%-var (--b));}. Pie:after {inset: calc (50%-var (--b) / 2); background: var (--c) Transform: rotate (calc (var (--p) * 3.6deg) translateY (calc (50-var (--w) / 2));} .animate {animation: p 1s .5s both;}. No-round:before {background-size: 00, auto;}. No-round:after {content: none;} @ keyframes p {from {--p0 both;}}

Effect picture:

At this point, I believe you have a deeper understanding of "using only one div with css to achieve pie chart". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.