教你如何用css3的clip-path画扇形、空心扇形(透明背景哦)
最近不是在参加创意游戏的活动吗,就想用css能不能组合出一些好看的效果,比如空心的圆环,或者扇形之类的,于是乎就去网上搜教程,结果找遍了谷歌和百度都没能找到想要的结果,可能这个需求确实小,也可能是我搜索的姿势不对吧,找出来的都是用障眼法实现相应的效果,根本不是我想要的,忽然想起来前阵子掘金给了一本张鑫旭大佬的css新世界,于是乎去翻了翻书里的内容,果然找到了解决的办法,那就是用强大的clip-path
属性,下面就让我们来看看这个属性如何实现我们想要的效果的吧。
本文仅描述如何使用
clip-path
实现我们想要的效果,不会对clip-path
其他属性进行讲解,如感兴趣可自行搜索学习。
先说说传统的做法是如何实现制作扇形的,我从网上得知的方法使用border-radius
属性画两个半圆,然后通过旋转其中一个半圆的方式去达成想要的效果,就像下面这样
当扇形角度大于180度的时候,我们第二个半圆的颜色就要与第一个圆的颜色一样,来形成扩展的效果,如果扇形角度小于180度的时候,我们第二个半圆的颜色就要与背景的颜色一样,这里第二个圆的颜色为了大家好理解,用了浅蓝色和浅灰色
https://code.juejin.cn/pen/7087597301052473374
可以看到,大于180度的扇形没有问题,但是小于180的角就要求我们背景颜色必须为纯色,并且背景颜色不变才可以,那我们的主角clip-path
是如何实现的呢?
clip-path
有好几个方法,今天我们用到的是多边形裁剪polygon
,这个属性的使用方法很简单,只要把你想要裁剪的图形的每个节点设置好,css就会把你设置的点连接起来,只留下连接线内存在的图形,就像下面这样
width: 100px;
height: 100px;
background: green;
clip-path:polygon(0% 0%, 50px 0, 50px 50px, 0 0);
那如果是扇形怎么做呢,这时候我们可以画一个圆,然后去裁剪我们想要的图形就可以了,就像下面这样子(后面会放集合代码块),我们先画一个圆,然后去裁剪左上角的一块区域(浅蓝色),然后裁剪区和背景区重叠的部分就会留下来(扇形)
至于怎么做空心的扇形呢,也很简单,我们把圆的背景色改成边框就可以了,就像下面这样子,画一个边框,然后裁剪左上角的位置,边框和裁剪区域重叠的部分就会留下来。
下面放一个结果的代码块 https://code.juejin.cn/pen/7087614245365350435
这个小知识点就介绍完了,可能很少人会用到,但是会总比不会好嘛
相关文章
- CSS3变形、渐变、动画的基本使用
- CSS3之opacity属性的简单使用
- css3实现3d导航
- html css制作404页面,一款纯css3实现的漂亮的404页面
- CSS3 transform 和 canvas 背后不为人知的秘密
- CSS3转换(transform)基本用法介绍
- CSS3形式返回顶部
- ResponsiveAeon:响应式 CSS3 网格系统框架
- css3 white-space: nowrap 实现横向滚动详解编程语言
- css3 rotateY 会盖住下面的元素详解编程语言
- css3 input placeholder颜色修改方法详解编程语言
- CSS3毛玻璃
- CSS3 渐变效果
- CSS3 多重背景
- wap手机图片滑动切换特效无css3元素js脚本编写