当前位置：首页 > CSS

css扇面制作

2026-01-28 02:37:54CSS

CSS 扇面制作方法

使用 CSS 的 transform 和 rotate 属性

通过将多个扇形元素旋转不同角度，组合成一个完整的扇面。每个扇形元素可以使用 border-radius 和 clip-path 属性来定义形状。

.fan {
  position: relative;
  width: 200px;
  height: 200px;
}

.sector {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff6b6b;
  border-radius: 100% 0 0 0;
  transform-origin: bottom right;
}

.sector:nth-child(1) { transform: rotate(0deg); }
.sector:nth-child(2) { transform: rotate(30deg); }
.sector:nth-child(3) { transform: rotate(60deg); }

使用 CSS 的 conic-gradient 属性

通过圆锥渐变直接绘制扇面，这种方法更简洁，适合单色或渐变色的扇面。

.fan {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #ff6b6b 0deg 90deg,
    #48dbfb 90deg 180deg,
    #1dd1a1 180deg 270deg,
    #feca57 270deg 360deg
  );
}

使用 SVG 和 CSS 结合

通过 SVG 的 path 元素绘制扇面，再利用 CSS 控制样式和动画。

<svg class="fan" viewBox="0 0 100 100">
  <path d="M50,50 L50,0 A50,50 0 0,1 100,50 Z" fill="#ff6b6b"/>
  <path d="M50,50 L100,50 A50,50 0 0,1 50,100 Z" fill="#48dbfb"/>
  <path d="M50,50 L50,100 A50,50 0 0,1 0,50 Z" fill="#1dd1a1"/>
  <path d="M50,50 L0,50 A50,50 0 0,1 50,0 Z" fill="#feca57"/>
</svg>

.fan {
  width: 200px;
  height: 200px;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

使用 CSS 变量动态控制扇面角度

通过 CSS 变量灵活调整扇面的角度和颜色，适合需要动态变化的场景。

.fan {
  --angle: 90deg;
  --color: #ff6b6b;
  width: 200px;
  height: 200px;
  background: conic-gradient(var(--color) 0deg var(--angle), transparent var(--angle) 360deg);
  border-radius: 50%;
}

注意事项

css扇面制作