当前位置：首页 > CSS

css制作圆环扇形

2026-01-28 13:09:05CSS

使用CSS制作圆环扇形

方法一：使用border-radius和clip-path

通过设置border-radius创建圆形，再利用clip-path裁剪出扇形效果。

.circle-sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #3498db;
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 50% 50%);
}

调整clip-path的坐标点可以改变扇形角度，例如90度扇形的坐标点为(50% 50%, 50% 0, 100% 50%, 50% 50%)。

方法二：使用conic-gradient

现代CSS支持圆锥渐变，可直接创建扇形效果。

.conic-sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0deg 90deg, transparent 90deg);
}

通过调整角度值(如0deg 90deg)可控制扇形大小，添加多个颜色停止点可创建多色扇形。

方法三：伪元素旋转技术

利用伪元素和transform旋转创建精确角度的扇形。

.rotating-sector {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.rotating-sector::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3498db;
  transform-origin: left center;
  transform: rotate(30deg);
}

通过调整rotate角度值和transform-origin位置，可以控制扇形起始点和范围。

方法四：SVG内联方案

直接在HTML中嵌入SVG实现更复杂的扇形效果。

<div class="svg-sector">
  <svg viewBox="0 0 100 100">
    <path d="M50,50 L100,50 A50,50 0 0,1 75,93 Z" fill="#3498db"/>
  </svg>
</div>

SVG路径中的A命令定义弧线，参数分别表示半径、旋转、大弧标志、方向标志和终点坐标。

方法五：CSS变量控制

使用CSS变量实现动态角度调整。

:root {
  --start-angle: 0deg;
  --end-angle: 90deg;
}

.variable-sector {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db var(--start-angle) var(--end-angle),
    transparent var(--end-angle)
  );
}

通过JavaScript修改CSS变量值即可实时调整扇形角度。

css制作圆环扇形