css制作圆环扇形

使用 CSS 制作圆环扇形

通过 CSS 的 border-radius、clip-path 和 transform 属性，可以轻松实现圆环扇形效果。以下是几种常见方法：

方法一：使用 clip-path 和伪元素

通过 clip-path 裁剪出扇形区域，结合伪元素叠加圆环效果。

<div class="fan"></div>

.fan {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #ff9a00;
}

.fan::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
  clip-path: polygon(50% 50%, 50% 0, 100% 0);
}

方法二：使用 conic-gradient 渐变

通过圆锥渐变创建扇形，再叠加白色圆环实现。

.fan {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#ff9a00 0deg 90deg, transparent 90deg);
  position: relative;
}

.fan::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: white;
}

方法三：SVG 替代方案

如果兼容性要求高，可以直接使用 SVG 实现。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,100 L100,0 A100,100 0 0,1 200,100 Z" fill="#ff9a00"/>
  <circle cx="100" cy="100" r="90" fill="white"/>
</svg>

关键参数说明

• 角度控制：在 clip-path 或 conic-gradient 中调整角度值（如 90deg）可改变扇形大小。
• 圆环宽度：通过伪元素的尺寸差（如外层 200px，内层 180px）控制圆环粗细。
• 动态效果：结合 CSS 动画（@keyframes）可实现旋转等交互效果。

以上方法均支持现代浏览器，如需兼容旧版本，建议使用 SVG 方案。