css画扇形的⼏种实现⽅式前⾔
前两天做了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°圆⼼⾓
剩下的事情就是三个标签然后依次旋转⼀定⾓度啦~~
矩形+半圆相切
这个⽅法来⾃。
基本思路是：左边的半圆旋转与右边的矩形相切。
div border属性
⾄于细节：
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.
2.
同样我对渐变的研究也会实时同步在
github仓库
时机成熟了会整理成⼀篇博⽂的（Flag…
后记
前端初学者⼀枚，表述、理解如有不⾜之处还望有⼼⼈不吝赐教，感激不尽。
有更好的解法也欢迎⼤家⼀起讨论
互勉(♥◠‿◠)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。