css 制作扇形

使用 CSS 制作扇形

通过 CSS 的 clip-path 属性可以轻松实现扇形效果。以下是一个简单的实现方法：

<div class="fan"></div>

.fan {
  width: 200px;
  height: 200px;
  background-color: #ff5722;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 50% 50%);
}

调整扇形的角度

通过修改 clip-path 的坐标点可以调整扇形的角度。例如，创建一个 90 度的扇形：

.fan {
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%);
}

使用 CSS 变量控制扇形

结合 CSS 变量可以更灵活地控制扇形的大小和角度：

.fan {
  --size: 200px;
  --angle: 90deg;
  width: var(--size);
  height: var(--size);
  background-color: #ff5722;
  border-radius: 50%;
  clip-path: polygon(
    50% 50%,
    50% 0%,
    100% 0%,
    100% 100%,
    calc(50% + 50% * cos(var(--angle))) calc(50% - 50% * sin(var(--angle))),
    50% 50%
  );
}

使用伪元素增强效果

通过伪元素可以为扇形添加边框或其他装饰效果：

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

.fan::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff5722;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 50% 50%);
}

.fan::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: white;
  border-radius: 50%;
  top: 5%;
  left: 5%;
}

使用 transform 旋转扇形

通过 transform 属性可以旋转扇形到任意角度：

.fan {
  transform: rotate(45deg);
  transform-origin: 50% 50%;
}

兼容性提示

clip-path 在现代浏览器中得到良好支持，但在旧版浏览器中可能需要使用 -webkit-clip-path 前缀。对于更复杂的扇形效果，可以考虑使用 SVG 作为替代方案。