怎么使用纯CSS实现饼状图

60%

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

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

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%