要使用 CSS 绘制一个圆环并在特定角度切除缺口，可以结合 conic-gradient 或者利用 border-radius 和 transform 来实现。以下是两种常见的方法：

方法 1：使用 conic-gradient (CSS3 新特性)

conic-gradient 允许我们创建一个基于圆形的渐变，适合用来绘制圆环并通过调整渐变的起始和结束角度来切除特定的部分。

示例：

.circular-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0deg 120deg,  /* 颜色从0度到120度 */
    transparent 120deg 240deg,  /* 透明部分从120度到240度，形成缺口 */
    #3498db 240deg 360deg /* 颜色从240度到360度 */
  );
}

说明：

• conic-gradient() 创建一个圆形渐变，颜色会围绕圆形分布。
• #3498db 是圆环的颜色。
• 0deg 120deg 代表颜色从 0 度到 120 度，形成圆环的第一个部分。
• transparent 120deg 240deg 创建一个从 120 度到 240 度的透明区域，即缺口部分。
• #3498db 240deg 360deg 代表圆环的剩余部分从 240 度到 360 度。

优点：

• 简单高效，利用 CSS 渐变创建。
• 适用于需要固定缺口角度的场景。

缺点：

• 只在支持 conic-gradient 的浏览器中有效，现代浏览器如 Chrome、Edge 和 Firefox 支持该特性。

---

方法 2：使用 border-radius 和 transform

如果你不想依赖 CSS3 的新特性，可以使用 border-radius 创建一个圆环，然后用 transform 和 ::before 或 ::after 伪元素来切除角度。

示例：

<div class="ring"></div>

.ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #3498db;
  position: relative;
  overflow: hidden;
}

.ring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #fff;  /* 缺口部分 */
  transform: rotate(60deg);  /* 设置切割角度 */
  transform-origin: 0 50%;
}

说明：

• .ring 是圆环的外部容器，使用 border-radius: 50% 来制作一个圆形。
• ::before 伪元素被用作缺口的部分，它的 background-color 设置为白色（透明也可以），通过 transform: rotate(60deg) 来设置缺口的角度。
• transform-origin: 0 50% 确保缺口从圆环的边缘开始，而不是从圆心旋转。

优点：

• 兼容性较好，可以用于大多数浏览器。
• 灵活，可以通过调整 rotate 的角度来改变缺口的位置。

缺点：

• 需要通过额外的伪元素来实现缺口，稍微复杂一些。

---

总结：

• conic-gradient 方法：最简单、直接的方法，适合创建一个环形并切除指定角度的缺口，但需要现代浏览器的支持。
• border-radius + transform 方法：兼容性更好，可以在较旧的浏览器中使用，适合需要更多控制的场景，但代码相对较复杂。

更多信息请关注其他相关文章！