当前位置：首页 > CSS

css制作圆环扇形

2026-03-11 20:11:06CSS

使用 CSS 制作圆环扇形

方法一：利用 `conic-gradient` 和伪元素

conic-gradient 可以创建圆锥渐变，适合制作扇形效果。结合伪元素和 border-radius 可以实现圆环扇形。

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

.ring-sector::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

conic-gradient 定义扇形角度范围（如 0deg 90deg 表示 0° 到 90° 的红色扇形）。
伪元素 ::after 通过绝对定位覆盖中心部分，形成圆环效果。

方法二：使用 SVG 实现

SVG 的 path 或 circle 元素可以更灵活地绘制扇形圆环。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,100 L100,0 A100,100 0 0 1 170,50 L100,100 Z" fill="red" />
  <circle cx="100" cy="100" r="70" fill="white" />
</svg>

path 的 d 属性通过贝塞尔曲线和圆弧命令绘制扇形。
circle 覆盖中心区域形成圆环。

方法三：CSS 旋转与裁剪

通过旋转和 overflow: hidden 裁剪实现动态扇形。

css制作圆环扇形

.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
  position: relative;
  overflow: hidden;
}

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  transform-origin: center;
  clip: rect(0, 100px, 200px, 0);
  transform: rotate(45deg);
}

.inner-circle {
  width: 140px;
  height: 140px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}