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; }

讯享网

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

讯享网.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裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

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

渐变

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

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

这里写图片描述

同样我们使用半圆相切的方式，3个半圆旋转一定角度得到一个扇形
这里写图片描述

旋转一定角度取其下半部分
这里写图片描述

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

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

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

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

后记

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

css画扇形的几种实现方式

前言

border

矩形+半圆相切

渐变

后记

相关推荐