用conic-gradient()是当前最可靠、最灵活的纯CSS绘制任意角度扇形的方法，只要不需支持IE就优先选它；它语法直观、角度即所见、天然支持动画和响应式，配合border-radius:50%及正确断点衔接（如red 0deg,red75deg,transparent75deg,transparent360deg）即可精准实现。
直接说结论：用 conic-gradient() 是当前最可靠、最灵活的纯 CSS 绘制任意角度扇形的方法，只要不需支持 IE 就优先选它。
用 conic-gradient() 画任意角度扇形
这是 CSS4 引入的锥形渐变，语法直观，角度即所见，且天然支持动画和响应式。关键点不是“能不能画”，而是怎么写才不出错：
-
background必须配合border-radius: 50%使用，否则渐变会拉伸变形 - 角度单位必须是
deg（不能省略），起始角默认是 0deg（正右方向），顺时针增长 - 颜色断点要成对衔接，比如
red 0deg, red 120deg, transparent 120deg, transparent 360deg，中间不能留空隙或重叠错位 - 若要扇形居中显示，容器宽高必须相等，且推荐设为偶数值（避免 subpixel 渲染偏差）
示例：一个 75° 红色扇形
.pie {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(
red 0deg,
red 75deg,
transparent 75deg,
transparent 360deg
);
}
需要兼容老浏览器？用 clip-path + 三角函数计算
当目标环境包含 Safari 15.4 以下、Firefox 89 以下或部分安卓 WebView 时，conic-gradient() 可能失效，此时改用 clip-path: polygon() 是较稳的选择。但注意这不是“写死坐标”，而是动态推导：
- 起点固定为圆心
50% 50%，第二点取右侧中点100% 50%（即 0° 方向） - 第三点需用
sin()和cos()算出终边端点，例如半径 60px、角度 75°，则坐标为：calc(50% + 60px * sin(75deg)) calc(50% - 60px * cos(75deg)) - CSS 原生不支持运行时三角函数，所以该写法需借助预处理器（如 Sass）或 JS 注入，纯 CSS 中只能写死数值
- IE 完全不支持
clip-path（除非用 SVG fallback）
纯 CSS 写死示例（75° 扇形，半径 60px）：
.pie-fallback {
width: 120px;
height: 120px;
border-radius: 50%;
background: red;
clip-path: polygon(
50% 50%,
100% 50%,
99.14% 24.12%
);
}
为什么别用 border-radius 单值模拟扇形
网上常见 border-radius: 80px 0 0 这类写法，它其实只能生成固定 90° 的“四分之一圆”，本质是遮掉三个直角，并非真正意义上的扇形：
- 角度不可调：你无法用它做出 60°、110° 或 270° 扇形
- 方向受限：只支持左上、右上、右下、左下四个象限，无法自由指定起始朝向
- 叠加困难：多个不同角度扇形并存时，每个都要单独造 DOM，维护成本陡增
- 动画卡顿：靠
transform: rotate()模拟角度变化时，边缘会出现锯齿或闪烁（尤其在低 DPI 屏）
SVG 是兜底方案，不是备选方案
如果项目必须支持 IE11 或需要精确控制路径（比如带缺口、内环、描边），SVG 就不是“退而求其次”，而是唯一合理选择。它的 A 指令可精准描述圆弧段，且所有现代浏览器包括 IE9+ 都支持：
-
A rx ry x-axis-rotation large-arc-flag sweep-flag x y这串参数里，large-arc-flag和sweep-flag决定弧线走向，容易填反导致图形消失 - 角度需转为终点坐标，建议封装函数计算，而不是手算（比如 75° 对应的终点是
50 + 50 * cos(75°), 50 - 50 * sin(75°)） - SVG 元素默认不继承父级字体/颜色，需显式设置
fill，且无 box model，宽高控制靠viewBox
一句话收尾：想快速上线、角度常变、还要加动画？闭眼用 conic-gradient()；要保底到 iOS 13.3 或 Android 4.4？提前准备好 clip-path 计算逻辑或 SVG fallback —— 这两个地方最容易被忽略，却决定着上线当天会不会被 QA 打回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
