css画扇形的几种实现方式

前言

前两天做了360前端星技术测验，其中有个UI效果实现是这样的
（请实现如图warning标志，其中圆的半径是100px，并且保证圆始终垂直居中页面显示）

核心技术难点是：
1. 扇形的实现
2. 多个扇形怎么拼凑成圆
下面我将从扇形的不同实现着手讲解我对这个UI效果实现的思考。

完整代码：
https://github.com/EmilyYoung71415/iCSS/tree/master/4-%E5%BD%A2%E7%8A%B6

border

我们知道利用border+宽高：0 可以实现如下效果

.snip{
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-left: 100px solid green;
    border-top: 100px solid yellow;
    border-bottom: 100px solid blue;
}

如果要实现扇形在此基础上圆角一下即可，同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果
如上方扇形

既然实现了一个扇形那么我们可以使用3个标签，依次旋转一定角度即可实现6个扇形相拼接的效果了啊~
当然还涉及到扇形所占比的问题，很明显，要求实现的UI里的扇形圆心角是60°，而上图的黄色扇形圆形角明显不是60°。我们采用”border边长制约扇形角度”的方法。

.snip{
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 43px;
    width: 0;
    height: 0;
    border-right: 57px solid transparent;/*100/√3*/
    border-left: 57px solid transparent;
    border-top: 100px solid yellow;
    border-bottom: 100px solid transparent;
    border-radius: 100%;
}
.warning .snip:nth-child(1) {
    transform: rotate(0deg);
}

.warning .snip:nth-child(2) {
    transform: rotate(120deg);
}

.warning .snip:nth-child(3) {
    transform: rotate(240deg);
}
// html
<div class="warning">
    <div class="snip"></div>
    <div class="snip"></div>
    <div class="snip"></div>
</div>

但是效果却是这样的？？

其实很好理解，我们以为三角形的高为100px，但是圆角化后，两边的边长有损失，那怎么办呢？
===》我们画一个更大的扇形，然后用半径为100px的圆去切不就行了嘛哇咔咔(-̇᷇̂ᴥ ̇᷇̂-)，当然扇形仍需要保持60°圆心角

剩下的事情就是三个标签然后依次旋转一定角度啦~~

矩形+半圆相切

这个方法来自张鑫旭大佬的博客。
基本思路是：左边的半圆旋转与右边的矩形相切。

至于细节：
1.半圆的由来：可以rect裁剪只显示圆的左边部分
2.同理，矩形也通过rect裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

然后剩下的完善同样三个标签旋转一定角度。

渐变

上述的方法基本思想都是生成3个60°的扇形，然后旋转不同角度形成一个warning标志，有没有办法onediv实现呢？
本着”傲娇的两大绝不原则”（能用一个div实现的绝不堆砌标签，能用html css实现的绝不用js的原则），我开始了绞尽脑汁之路：）

我们先试试渐变实现半圆：

background:
    // 渐变角度0 透明和黑色各占一半
    linear-gradient(0deg,transparent 50%,black 50%);

同样我们使用半圆相切的方式，3个半圆旋转一定角度得到一个扇形

旋转一定角度 取其下半部分

你可能会想6个扇形是不是渐变6次即可？
当然不是，当颜色占壁超过一半后，剩下的颜色会被覆盖。所以最多只能形成3个扇形得到的半圆（多的那部分裁剪掉），那剩下的一半圆呢？
使用伪类同样的方式生成即可~

这个方法不太容易想到，其实渐变这个属性有很多强大的功能，许多onediv效果实现渐变属性贡献了不少力量，目前我对渐变的属性也尚处于初研究阶段，不得不的吐槽一下渐变属性确实不太好掌握（在PS可视化界面里拉渐变我都拉不好的说..），但是一旦掌握了又将踏入一个新的世界：）

推荐阅读：
1. 张鑫旭—深入理解CSS3 gradient斜向线性渐变
2. MDN-linear-gradient

同样我对渐变的研究也会实时同步在
github仓库这里
时机成熟了会整理成一篇博文的（Flag…

后记

前端初学者一枚，表述、理解如有不足之处还望有心人不吝赐教，感激不尽。
有更好的解法也欢迎大家一起讨论
互勉(♥◠‿◠)ﾉ