当前位置：首页 > CSS

css制作圆环扇形

2026-02-13 07:27:06CSS

使用CSS制作圆环扇形

方法一：利用border和transform

通过设置元素的border属性并结合transform旋转，可以创建圆环扇形效果。

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

.sector-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: #3498db;
  transform: rotate(45deg);
}

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

通过clip-path裁剪元素并结合伪元素实现扇形效果。

<div class="sector-ring-clip"></div>

.sector-ring-clip {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #3498db;
}

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

方法三：使用conic-gradient

CSS的conic-gradient可以实现更灵活的扇形效果。

<div class="sector-ring-conic"></div>

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

.sector-ring-conic::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
}

方法四：SVG实现

使用SVG可以更精确地控制扇形的大小和角度。

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#3498db" stroke-width="10" stroke-dasharray="62.8 188.4" transform="rotate(-90 50 50)"/>
</svg>

方法五：CSS变量控制角度

通过CSS变量可以动态调整扇形角度。

<div class="sector-ring-variable" style="--angle: 90deg"></div>

.sector-ring-variable {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0deg var(--angle),
    transparent var(--angle) 360deg
  );
  position: relative;
}

.sector-ring-variable::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
}

这些方法各有优缺点，可根据具体需求选择最合适的实现方式。border方法简单但扩展性有限，clip-path和conic-gradient更灵活但兼容性稍差，SVG则具有最好的兼容性和精确控制能力。

css制作圆环扇形