css 扇形

作者：刎心封爱为伱锁情发布日期:2025-09-14 浏览:54

/* 使用 CSS 创建一个扇形 */

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

.sector {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0, transparent 50%, lightblue 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transform: rotate(45deg);
}

/* 解释说明：
1. .container 是一个包含扇形的容器，设置了宽度和高度。
2. .sector 使用了径向渐变（radial-gradient）来创建一个圆形区域，并通过透明度控制扇形的边界。
3. clip-path 用来裁剪元素，形成扇形的形状。这里的多边形定义了四个点，形成了一个类似扇形的形状。
4. transform: rotate(45deg) 旋转元素以调整扇形的角度。
*/

上一篇：css flex gap

下一篇：css 自定义滚动条