css扇面制作

使用 CSS 制作扇面

可以通过 CSS 的 transform 和 rotate 属性结合伪元素或子元素实现扇面效果。以下是一个基本实现方法：

<div class="fan">
  <div class="fan-piece"></div>
  <div class="fan-piece"></div>
  <div class="fan-piece"></div>
  <!-- 更多扇片 -->
</div>

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

.fan-piece {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #f00;
  border-radius: 100% 0 0 0;
  transform-origin: 100% 100%;
}

.fan-piece:nth-child(1) {
  transform: rotate(0deg);
  background: #f00;
}

.fan-piece:nth-child(2) {
  transform: rotate(30deg);
  background: #0f0;
}

.fan-piece:nth-child(3) {
  transform: rotate(60deg);
  background: #00f;
}

使用 CSS 变量实现可定制扇面

通过 CSS 变量可以更方便地调整扇面的角度和颜色：

.fan {
  --fan-pieces: 12;
  --fan-angle: calc(360deg / var(--fan-pieces));
}

.fan-piece {
  transform: rotate(calc(var(--index) * var(--fan-angle)));
  background: hsl(calc(var(--index) * 30), 100%, 50%);
}

动画效果

可以为扇面添加旋转动画：

.fan {
  animation: rotateFan 5s linear infinite;
}

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

使用 clip-path 创建特殊形状扇面

clip-path 可以创建更复杂的扇面形状：

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

响应式扇面

通过 viewport 单位实现响应式扇面：

.fan {
  width: 20vmin;
  height: 20vmin;
}

.fan-piece {
  width: 10vmin;
  height: 10vmin;
}