如何仅使用 CSS 创建百分比饼图？

仅使用 CSS 的百分比饼图

仅使用 CSS 创建静态饼形元素需要了解特定的 CSS 属性。

元素 # 2 创建

要创建代表特定百分比的元素 #2，请使用 CSS 属性 conic-gradient。此属性创建一个锥形渐变，其顶点位于父元素的中心。圆锥体的角度由百分比值决定，100% 代表一个完整的圆。

百分比值管理

要管理不同百分比的元素#2 的形状，请使用组合CSS 属性：

• conic-gradient： 调整圆锥体的角度以匹配
• clip-path: 使用圆形剪辑路径来限制圆锥曲线渐变的可见区域。这可以确保形状对于小百分比和大百分比都能正确显示。

动画

要为饼图制作动画，请使用动画属性并定义一个 from 状态，将百分比设置为0. 通过逐渐增加百分比值，饼图将逐渐填满。

四舍五入边缘

要实现圆形边缘，请使用带有两个色标的径向渐变。第一个停止在 98% 处创建微妙的高光，而第二个停止在 100% 处使用 #0000 创建清晰的边界。应用遮罩或 -webkit-mask 有选择地隐藏渐变的部分。

示例代码

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  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);
  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 - 90deg)) translate(calc(var(--w)/2 - 50%));
}

以上是如何仅使用 CSS 创建百分比饼图？的详细内容。更多信息请关注PHP中文网其他相关文章！