当前位置：首页 > CSS

css制作扇形

2026-02-12 14:20:54CSS

使用CSS制作扇形

通过CSS的clip-path属性可以轻松实现扇形效果。clip-path允许裁剪元素的显示区域，结合polygon()或circle()函数定义裁剪形状。

.sector {
  width: 200px;
  height: 200px;
  background-color: #ff6b6b;
  clip-path: circle(50% at 50% 50%);
  transform: rotate(0deg);
}

调整扇形的角度

通过clip-path的polygon()函数可以定义扇形的具体角度。例如，制作一个90度的扇形：

.sector-90 {
  width: 200px;
  height: 200px;
  background-color: #4ecdc4;
  clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
}

使用CSS变量动态控制扇形

通过CSS变量（var()）可以动态调整扇形的角度和大小，增强灵活性。

.sector-custom {
  width: 200px;
  height: 200px;
  background-color: #ffbe76;
  clip-path: polygon(
    50% 50%,
    100% 50%,
    calc(50% + 100% * cos(var(--angle))) calc(50% - 100% * sin(var(--angle)))
  );
}

结合伪元素实现复杂扇形

使用伪元素（::before或::after）可以创建更复杂的扇形效果，例如双层扇形或带有边框的扇形。

css制作扇形

.sector-with-border {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #6a89cc;
  clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
}

.sector-with-border::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background-color: #82ccdd;
  clip-path: polygon(50% 50%, 95% 50%, 95% 5%);
  top: 10px;
  left: 10px;
}