AI 摘要：本文作者 Juan Diego Rodríguez 试图在尽量不依赖 JavaScript 的前提下，用纯 CSS 构建一个“完美”的饼图，需满足三大目标：语义化（屏幕阅读器可读）、HTML 可定制（仅改 HTML 即可更新图表）、JavaScript 最小化。文章首先指出 conic-gradient() 虽能快速绘制饼图，但缺乏语义且难以动态定制；随后提出基于 <figure> + <ul> 的语义化结构，利用 data-percentage 和 data-color 属性驱动样式，并通过 CSS 自定义属性（--radius、--percentage、--bg-color 等）结合 attr() 函数提取数据。由于 CSS 无法在兄弟元素间累积状态，作者借助极简 JavaScript 计算每个扇形的起始角度（--accum），再通过 conic-gradient(from var(--offset)) 实现正确旋转。最后，利用 CSS Grid 叠放扇形，并借助 cos() 与 sin() 函数将标签沿圆周精准定位。最终成果兼具视觉美观与无障碍支持，但仍留有改进空间，如自动计算百分比、自动生成配色等。

CSS-Tricks

Trying to Make the Perfect Pie Chart in CSS | CSS-Tricks

Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.