怎么使用纯CSS实现饼状图

这篇文章主要介绍“怎么使用纯CSS实现饼状图”，在日常操作中，相信很多人在怎么使用纯CSS实现饼状图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用纯CSS实现饼状图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网络空间、营销软件、网站建设、秦都网站维护、网站推广。

怎么使用纯CSS实现饼状图

本文为译文「意译」
完整的代码请滑到文末。

我们只使用一个div，仅采用css实现饼状图。

HTMl 结构

60%

我们添加了几个 css 的变量：

--p：进度条的百分比（纯数字，不带%），饼状图值和 div 内容（带%）一致。
--b：边框厚度的值
--c：边框的主体颜色

本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--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应用之后：

怎么使用纯CSS实现饼状图

为了使得仅是边框的区域被看到，我们使用 mask 属性去隐藏中间圆的部分。我们将使用 radial-gradient() 方法：

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

上面代码应用后，可得到效果图如下：

怎么使用纯CSS实现饼状图

我们的目标如下图：

怎么使用纯CSS实现饼状图

我们更改下代码即可实现：

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))); }

添加圆形边缘

如何添加圆形边缘呢，看了下面插图，你就明白这个小技巧。

.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; 的简写。

这里我们将元素往左和右移动了50% - b/2，也就等于元素宽度为 b, 且左右居中。针对高度，同理。

先将元素旋转了相应的度数，之后对其位置进行移动，这里涉及到了对 Y 轴居中。看文字也许有些难懂，结合下面的插图理解下：

添加动画

到现在为止，我们实现的是一个静止的饼状图。我们接下来为它加上动效。

@property --p{ syntax: ''; inherits: true; initial-value: 1; } .pie { --p:20; --b:22px; --c:darkred; --w: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%,#0000) 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: 0 0, auto; } .no-round:after { content: none; } @keyframes p{ from{--p:0} }

大橙子网站建设，新征程启航

怎么使用纯CSS实现饼状图

HTMl 结构

Pie 的基本设置

添加圆形边缘

添加动画

代码和效果图

其他资讯