如何使用CSS实现切去1/n部分的圆形（Figma中的Arc/Sweep形状）？

嘿，别着急！这个看起来有点棘手的形状，用CSS其实有好几种简单的实现方式，不用复杂的多边形叠加也能搞定，我给你分享两个最实用的方法：

方法一：用clip-path（最灵活通用） #

clip-path可以直接自定义元素的显示区域，完美适配这种带缺口的圆形。咱们只需要用polygon()来定义裁剪路径就行。

示例：顶部带小缺口的圆形 #

假设我们要做一个直径200px的圆，顶部切去一个30°的小扇形，代码如下：

.arc-shape {
  width: 200px;
  height: 200px;
  background: #4285F4; /* 替换成你需要的颜色 */
  /* 用polygon定义裁剪路径：圆心 → 缺口右端点 → 右下角 → 左下角 → 缺口左端点 → 圆心 */
  clip-path: polygon(
    50% 50%,
    calc(50% + 50% * sin(15deg)) calc(50% - 50% * cos(15deg)),
    100% 100%,
    0% 100%,
    calc(50% - 50% * sin(15deg)) calc(50% - 50% * cos(15deg)),
    50% 50%
  );
}

这里的sin(15deg)和cos(15deg)是用来计算缺口左右端点的坐标，15°是30°缺口的一半，这样能保证缺口在顶部居中。如果要调整缺口大小，只需要把15deg改成你需要的角度就行（比如要60°缺口就改成30deg）。

如果觉得三角函数麻烦，也可以直接写固定的百分比数值，比如30°缺口的端点大概是93.3% 25%和6.7% 25%，代码可以简化成：

clip-path: polygon(50% 50%, 93.3% 25%, 100% 100%, 0% 100%, 6.7% 25%, 50% 50%);

方法二：用伪元素+border-radius（适合纯色背景场景） #

如果你的这个形状是放在纯色背景上的，还可以用“遮罩”的思路：先做一个完整的圆形，然后用一个三角形伪元素把缺口的位置盖住。

示例代码：

.arc-shape {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #4285F4;
}

/* 用伪元素做一个三角形，盖住顶部的缺口 */
.arc-shape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 调整border的宽度可以改变缺口大小 */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 30px solid #ffffff; /* 这里用页面的背景色 */
}

这个方法的优点是代码简单，但缺点是如果页面背景不是纯色（比如渐变、图片），伪元素就没法完美适配了。

两种方法都能实现你要的Arc/Sweep形状，根据你的实际场景选就行啦！

备注：内容来源于stack exchange，提问作者Ilya Avkhimenya