前言
前两天做了360前端星技术测验，其中有个UI效果实现是这样的
（请实现如图warning标志，其中圆的半径是100px，并且保证圆始终垂直居中页面显示）
核心技术难点是：
1. 扇形的实现
2. 多个扇形怎么拼凑成圆
下面我将从扇形的不同实现着手讲解我对这个UI效果实现的思考。
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可视化界面里拉渐变我都拉不好的说..），但是一旦掌握了又将踏入一个新的世界：）
