CSS 绘制任意角度扇形-总结总结了4种方式扇形的方法。第一种是使用遮盖/旋转技术，第二种是使用clip-path属性，

前几期我们简单的讲解了怎样实现绘制一个扇形(任意角度)
今天我们对前几期的内容做个简单的汇总, 方便大家阅读

遮盖/旋转

使用绝对定位和旋转的技术。对于不同的旋转角度, 可以通过改变绝对定位的位置以及旋转的角度来实现

<div class="sector">
    <span class="cover-1"></span>
    <span class="cover-2"></span>
</div>

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

.sector {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: $sector-size;
    height: $sector-size;
    background-color: $base-color;
    border-radius: 50%;
    margin: 20px;

    .cover-1, .cover-2 {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: $base-color;
    }

    .cover-1 {
        background-color: $active-color;
        transform-origin: right;
        transform: rotate(270deg); // 设置角度
    }

    .cover-2 {
        right: 0;
        background-color: $active-color;
    }
}

当角度为: 0 ~ 180 度时, 29 行 cover-2 的处理是不需要的
当角度为: 180 ~ 360 度时, 需要加上 29 行对 cover-2 的处理
其实是这样的, 当小于 180 时 cover-2 要位于左侧, 否则就要在右侧
原文地址: CSS 绘制任意角度扇形--遮盖/旋转

clip-path(css)

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏
通过使用 polygon 函数，可以定义一个多边形，从而实现任意角度的扇形

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

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

.sector {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
    background-color: $base-color;
    transform: rotate(45deg);
    border-radius: 50%;
    overflow: hidden;

    &::before {
        display: inline-block;
        content: '';
        width: 100%;
        height: 100%;
        background-color: $active-color;
        clip-path: polygon(50% 50%, 0 0, 100% 0%, 100% 100%, 0 100%, 0 40%);
    }
}

原文地址: CSS 绘制任意角度扇形--clip-path

渐变图像(css)

通过 css 属性 background-image 设置一个背景颜色的方式实现
使用 CSS 的 conic-gradient 函数来绘制任意角度的扇形

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

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

.sector {
    display: inline-block;
    width: $sector-size;
    height: $sector-size;
    border-radius: 50%;

    background-image: conic-gradient(
        $active-color 0, $active-color 25%,
        $base-color 25%, $base-color 100%
    );
}

这个是最简单的一种方式, 并且代码也是最少的
我还写了一些相关的示例和扩展信息: CSS 绘制任意角度扇形-渐变图像-示例
原文地址: CSS 绘制任意角度扇形-渐变图像(css)

SVG

svg 和 circle 的使用都是最基本的 svg 相关知识
这个方法主要是使用了 stroke 的特性, 使用 stroke 画出一个扇形
总体来说还是比较巧妙的, 感兴趣的可以一步一步的看一下

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="50"
        fill-opacity="0"
        stroke="red"
        stroke-width="100"
        stroke-dasharray="175 314"
    />
</svg>

原文地址: CSS 绘制任意角度扇形-SVG

小结

这就是我知道的所有的方法了, 如果您有其他的方式欢迎提出来我们一起完善
哪一种方式是最好的? 适合你的才是最好的!
为什么要写这么多这种实现方式, 有一种不就行了吗?
- 通过实现扇形学习各个方面的知识
- 每种方法都有各自的优点和缺点, 所以你要在这些方法中选择适合你的方法

CSS 绘制任意角度扇形-总结

遮盖/旋转

clip-path(css)

渐变图像(css)

SVG

小结

相关文档