饼图是常见的组件，可让你显示整体的各个部分，你可以将它们用于许多不同的场景。 你会发现很多关于构建这样一个组件的文章，但它们通常要么依赖于 SVG，要么依赖于大量的 HT ML 元素。在这篇文章中，我将向你展示如何使用 CSS 和仅一个元素创建一个饼图。
接下来我们制作一个静态饼图，一个动画饼图，我们也可以有 圆 角。然而所有这一切都只有一个 <div> 元素。
除此之外，我们可以使用 CSS 变量轻松 调整 不同的值，因此我们不必为更改 CSS 代码而烦恼。
饼图的 HTML 结构
正如我上面提到的，我们有一个单一的 <div> ，我们添加百分比值（饼图的 进度 ）作为主要内容：
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>
我们还将 CSS 变量添加为内联样式。
--p ：这个变量 应该 包含百分比值作为一个数字（不带 % 符号）。它应该与内容相同。 --b ：这个变量将定义边框的粗细。 --c ：这个变量将定义主要颜色。为了本文和演示，我使用单字符变量来保持代码简短。但在生产环境中使用代码时，最好考虑更 明确 的变量。示例： -- PE rcentage 、 --border -t hickness 和 --m ai n-color 。
饼图的 CSS 设置
我们首先从样式化我们的内容 开始 。这部分很 简单 ，代码如下：
.pie {
--w: 150px;
width: VAR (--w);
aspect-ratio: 1;
dis@R_ 406 _2266@: inline-grid;
place-content: center ;
m arg in: 5px;
font- Size: 25px;
font-weight : bold;
font-f ami ly: sans -s erif;
}我将元素定义为 inline-grid 使用 place-content: center . 我们 aspect-ratio: 1 用来确保元素保持方形。我们也可以使用 h ei ght: var(--w) ，但学习和使用新的 CSS 属性总是好的。
你可能想 知道 为什么我使用变量来定义 宽 度而不是简单地设置 width: 150px . 我需要知道宽度的值以备将来使用，因此我将其定义为变量。
剩下的所有 CSS 都是非常基本的文本样式。随意更新它。
让我们继续讨论有趣的部分——我们组件的主要形状。为此，我们将使用具有以下样式的伪元素：
.pie:before{
content: "";
pos IT ion: absolute;
border-radius: 50%;
inset: 0;
background: conic-gra die nt(var(--c) calc(var(--p)*1%), # 0000 0);
}一个覆盖所有区域的伪元素， position: absolute 这要归功于 inset: 0 . 是的，它又是一个新的 CSS 属性，它是 top , right , bottom , and的简写 right 。
您可以在此处阅读更多信息
https://developer.mozilla. org /en-US/docs/Web/CSS/inset
然后我们把它变成一个圆圈 ( border-radius: 50% ) 并应用一个 conic-gradient() . 请注意我们定义为内联样式的 CSS 变量的使用（ --c 用于颜色和 --p 百分比）。
到目前为止，这将为我们提供以下结果：
我们越来越近了！这 conic-gradient() 是给我们一个双色渐变。从 0% 到 p% 主色，其余部分为透明色（用十六进制值定义 #0000 ）。
为了只保留边框部分，我们将使用 a mask 来隐藏中间部分。这次我们将使用 radial-gradient() ：
radial-gradient(farthest-side, red calc(99% - var(--b)),blue calc(100% - var(--b)))
以上作为背景应用将为我们提供以下信息：
注意定义边框粗细的变量的使用 --b （在上面显示为蓝色）。
现在想象 红色 部分是不可见部分，蓝色部分是可见部分。如果我们对属性使用相同的渐变，这就是我们将得到的 mask ：
我们的饼图包含一个元素和几行 CSS 代码。
.pie {
--w:150px;
width: var(--w);
aspect-ratio: 1;
position: relative;
display: inline-grid;
place-content: center;
mar gin : 5px;
font-size: 25px;
font-weight: bold;
font-f am ily: 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)));
}和 HTML：
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>
如何添加圆角边缘
为此，我将添加一个额外的渐变层来圆顶边缘，并添加一个伪元素来圆另一个边缘。这是一个理解技巧的 插图 ：
(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);
}除了 ， conic-gradient() 我们还添加了一个 radial-gradient() 放置在顶部的，其大小等于由 定义的边框厚度 --b 。 (2) 将另一边倒圆的代码：
.pie :after {
content: "";
position: absolute;
border-radius: 50%;
inset: calc(50% - var(--b)/2);
background: var(--c);
transform: rotate(calc(var(--p)*3.6 deg )) translate(calc(50% - var(--w)/2));
}该 inset 属性将伪元素的大小设置为等于 --b 。请记住，它是 top , right 和 bottom 的简写 left 。如果我们有
left = right = 50% - b/2
这意味着我们从每一边移动到中心减去等于的偏移量 b/2 - 所以我们最终的宽度等于 2*b/2 = b 。高度的逻辑相同。
现在我们需要正确放置我们的元素，这就是我们使用 transform 属性的 原因 。我们的元素最初放置在中心，所以我们需要先旋转它。有了百分比，我们使用“三规则”来获得角度：
angle = percentage* 360 deg/100
然后我们进行平移，这里我们需要宽度，因为我们必须执行一 半 宽度的平移 ( w/2 )。
好吧，好吧——你可能对所有这些公式有点迷失了。在下面找到一个插图以 了解 转换属性背后的逻辑
之后，我们用主色给伪元素上色 --c ，就完成了。我们有圆边的饼图。
如何为饼图制作动画
静态饼图很好，但动画饼图更好！为此，我们将动画百分比值 --p 从 0 定义值。默认情况下，我们无法为 CSS 变量设置动画，但由于有了新 @ PR operty 功能，它现在可以实现了。
我们注册变量：
@property --p{
syntax: '<number>';
inherits: true;
initial-value: 0;
}我们创建一个 keyframes ：
@keyframes p {
From {--p:0}
}请注意，我们只需要指定 f rom . 这样做，默认情况下，浏览器将 to 等于我们定义的值 ( <div class="pie" style="--p:60;">60%</div> )。
最后，我们称之为动画。您可以根据需要定义持续时间/延迟。
animation: p 1s .5s both;
注意：这种技 术 并未得到广泛支持。你可以在基于 chromium 的浏览器（C hr ome 和 Edge ）上对其进行测试，但在 Firefox 和 Safari 上会失败。您可以查看Can I Use以跟踪支持。
（学习视频分享：css视频教程）
以上就是手把手教你使用CSS制作动态饼图（附代码）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 手把手教你使用CSS制作动态饼图（附代码） 全部内容，希望文章能够帮你解决 手把手教你使用CSS制作动态饼图（附代码） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于手把手教你使用CSS制作动态饼图（附代码）的详细内容...