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…

后记

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

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页