css制作扇形

使用 CSS 制作扇形的方法

通过 CSS 的 border-radius 和 transform 属性可以轻松实现扇形效果。以下是几种常见的实现方式：

方法一：使用 border-radius 和旋转

通过设置 border-radius 为 50% 创建一个圆，然后利用 overflow: hidden 和 transform 旋转来裁剪出扇形。

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

.sector {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f00;
  overflow: hidden;
  position: relative;
}

.sector::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: #fff;
  transform-origin: 100% 100%;
  transform: rotate(30deg) skewY(30deg);
}

方法二：使用 conic-gradient

conic-gradient 是 CSS 的圆锥渐变，可以直接创建扇形效果。

.sector {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#f00 0% 30%, transparent 30% 100%);
}

方法三：使用 clip-path

clip-path 可以通过路径裁剪实现扇形。

.sector {
  width: 100px;
  height: 100px;
  background: #f00;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

调整扇形角度

通过修改旋转角度或圆锥渐变的百分比，可以调整扇形的大小。

.sector {
  background: conic-gradient(#f00 0% 60%, transparent 60% 100%);
}

添加动画效果

结合 CSS 动画，可以为扇形添加旋转效果。

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

.sector {
  animation: rotate 2s linear infinite;
}

兼容性说明

• conic-gradient 在现代浏览器中支持较好，但在旧版本浏览器中可能需要前缀或替代方案。
• clip-path 的兼容性较好，但路径定义可能需要调整以实现复杂效果。

通过以上方法，可以灵活地创建和定制扇形效果。