CSS 绘制任意角度扇形–clip-path(css)

• 我目前了解的方案有 4 种

  • 在一个矩形上方设置 2 个小矩形, 通过小矩形的旋转实现 (CSS 绘制任意角度扇形–遮盖/旋转)
  • 通过 css clip-path 实现 (本文)
  • 待定 …
  • 使用 svg 的功能实现

• 本文我们就来说说第二种方法 (clip-path)

clip-path 知识点

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。MDN

语法

clip-path: none; // 默认值

clip-path: inset(100px 50px); // 定义一个矩形(100 50)(用于显示区域)
clip-path: url(resources.svg#c1); // 

clip-path: border-box; // 参考框盒, 如 margin-box, content-box 等

clip-path: inherit;

• basic-shape
  • inset() 定义一个矩形
  • circle() 定义一个圆形（使用一个半径和一个圆心位置）
  • ellipse() 定义一个椭圆（使用两个半径和一个圆心位置）
  • polygon() 定义一个多边形（使用一个 SVG 填充规则和一组顶点）
  • path() 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）
• geometry-box
  • margin-box border-box padding-box content-box
  • fill-box stroke-box view-box

示例

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

开始实现扇形

讲完了 clip-path, 我们来看看具体要怎样实现吧

第一步, 实现基本现状

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

$sector-size: 80px;
$base-color: #EEEEEE;

.sector {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
    background-color: $base-color;
}

• $sector-size 可以快捷的修改尺寸;
• $base-color 设置背景颜色;

第二步, 使用 before 创建一个伪元素

$active-color: #4C84FF;
.sector {
    // ...
    &::before {
        display: inline-block;
        content: '';
        width: 100%;
        height: 100%;
        background-color: $active-color;
    }
}

• 因为 .sector 上设置了 base-color 颜色, 没办法设置 active-color 颜色
• 所以我们使用伪元素 before 创建一个新元素

第三步, 实现 3 角形

.sector {

    &::before {
        // ...
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%); // 3个点确定一个3角形
    }
}

第三步, 增大角度

clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0 100%, 0 0, 10% 0);

• 可以看到 7 个点就能画出任意角度的扇形

第四步, 优化一下用 6 个点实现

clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 40%);

• 这个时候我们可以用 6 个点实现扇形了
• 但这个时候开始是从 -45 度开始的, 我们可以先旋转 45 度

第五步, 实现最终扇形

.sector {

    // ...
    transform: rotate(45deg);
    border-radius: 50%;
    overflow: hidden;
}

• transform: rotate(45deg); 使扇形可以从零开始;
  

小结

• 这就是一步一步的处理过程了
• 如果你需要确切的角度, 你可以通过 js 计算;
• 下期将会尝试用一种新方法

相关文档

环(圆)形进度条
css 实现关闭(close) Icon
CSS 绘制任意角度扇形–遮盖/旋转