仅使用一个div配合css实现饼状图的方法
本篇内容主要讲解“仅使用一个div配合css实现饼状图的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“仅使用一个div配合css实现饼状图的方法”吧!
新乡县网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联公司2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。
完整的代码请滑到文末。
我们只使用一个div，仅采用css实现饼状图。
HTMl 结构
60%
我们添加了几个 css 的变量：
本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 来表示。
Pie 的基本设置
我们为饼状图设定基本的样式。
.pie {
--w: 150px; // --w -> --width
width: var(--w);
aspect-ratio: 1; // 纵横比，1 说明是正方形
display: inline-grid;
place-content: center;
margin: 5px;
font-size: 25px;
font-weight: bold;
font-family: sans-serif;
}上面我们使用了 aspect-ratio: 1; 保证 div 是正方形，当然你也可以使用 height: var(--w) 达到效果。
接下来，我们使用伪元素实现简单的饼状图：
.pie:before {
content: "",
position: absoute;
border-radius: 50%;
inset: 0; // 知识点 1
background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知识点 2
}知识点1: inset: 0; 相当于 top: 0; right: 0; bottom: 0; top: 0;
知识点2: conic-gradient 圆锥渐变，css 方法, 更多内容， 这里的 #0000 是 transparent 的十六进制。
#0000 Hex Color · Red (0%) · Green (0%) · Blue (0%).
conic-gradient应用之后：
为了使得仅是边框的区域被看到，我们使用 mask 属性去隐藏中间圆的部分。我们将使用 radial-gradient() 方法：
radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))
上面代码应用后，可得到效果图如下：
我们的目标如下图：
我们更改下代码即可实现：
60%
.pie {
--w: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)));
}添加圆形边缘
如何添加圆形边缘呢，看了下面插图，你就明白这个小技巧。
针对图上的效果(1)，是将圆形放在开始的边缘。
.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);
}针对图上的效果(2)，是将圆形放在结束的边缘。
.pipe: after {
content: "";
position: absolute;
border-radius: 50%;
inset: calc(50% - var(--b)/2); // 知识点1
background: var(--c);
transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); // 知识点2
}知识点1： 的 inset: 0; 上面我们也提到 -- 它是 left: 0; right: 0; bottom: 0; top: 0; 的简写。
这里我们有：
left = right = 50% - b/2
这里我们将元素往左和右移动了50% - b/2，也就等于元素宽度为 b, 且左右居中。针对高度，同理。
知识点2： 的旋转度数计算 --
angle = percentage * 360deg / 100
先将元素旋转了相应的度数，之后对其位置进行移动，这里涉及到了对 Y 轴居中。看文字也许有些难懂，结合下面的插图理解下：
添加动画
到现在为止，我们实现的是一个静止的饼状图。我们接下来为它加上动效。
先注册变量：
@property --p {
syntax: '';
inherits: true;
initial-value: 0;
}接着，我们创建关键帧：
@keyframes p {
from {
--p: 0
}
}注意：这里我们只需要设置 from 的 --p 值即可。浏览器会自动匹配我们预设 to 中的值（div class="pie" style="--p:60;">60%
