手把手教你使用CSS制作动态饼图（附代码）

CSS如何制作饼图？下面本篇文章手把手教你使用CSS制作动态饼图，希望对大家有所帮助！

饼图是常见的组件，可让你显示整体的各个部分，你可以将它们用于许多不同的场景。 你会发现很多关于构建这样一个组件的文章，但它们通常要么依赖于 SVG，要么依赖于大量的 HTML 元素。在这篇文章中，我将向你展示如何使用 CSS 和仅一个元素创建一个饼图。

接下来我们制作一个静态饼图，一个动画饼图，我们也可以有圆角。然而所有这一切都只有一个<div>元素。

除此之外，我们可以使用 CSS 变量轻松调整不同的值，因此我们不必为更改 CSS 代码而烦恼。

饼图的 HTML 结构

正如我上面提到的，我们有一个单一的<div>，我们添加百分比值（饼图的进度）作为主要内容：

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

我们还将 CSS 变量添加为内联样式。

• --p：这个变量应该包含百分比值作为一个数字（不带%符号）。它应该与内容相同。
• --b：这个变量将定义边框的粗细。
• --c：这个变量将定义主要颜色。

为了本文和演示，我使用单字符变量来保持代码简短。但在生产环境中使用代码时，最好考虑更明确的变量。示例：--percentage、--border-thickness和--main-color。

饼图的 CSS 设置

我们首先从样式化我们的内容开始。这部分很简单，代码如下：

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

我将元素定义为inline-grid使用place-content: center. 我们aspect-ratio: 1用来确保元素保持方形。我们也可以使用height: var(--w)，但学习和使用新的 CSS 属性总是好的。

你可能想知道为什么我使用变量来定义宽度而不是简单地设置 width: 150px. 我需要知道宽度的值以备将来使用，因此我将其定义为变量。

剩下的所有 CSS 都是非常基本的文本样式。随意更新它。

让我们继续讨论有趣的部分——我们组件的主要形状。为此，我们将使用具有以下样式的伪元素：

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

一个覆盖所有区域的伪元素，position: absolute这要归功于inset: 0. 是的，它又是一个新的 CSS 属性，它是top, right, bottom, and的简写right。

您可以在此处阅读