摘要:在之前所提到绘制正多边形的方法,算是纯粹利用伪元素来完成,不过坦白说还有另外一种方法,可以将单一做更多形状的变换,这种方法就是的,这个看起来有点眼熟,因为它原本就存在于里头,利用掩码剪裁的方法,连接坐标绘制掩码区域,就可以做出许多不同的
在之前所提到绘制正多边形的方法,算是纯粹利用伪元素来完成,不过坦白说还有另外一种方法,可以将单一div做更多形状的变换,这种方法就是CSS3的“clip-path”,这个“clip-path”看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升,自然而然的就可以用它来做些与众不同的变化。
运用clip-path超强的网站最先看到这个属性的应用,是从这个网站看到的:http://species-in-pieces.com/,不得不说这个网站做得实在太神了,一开始看到还真以为是用SVG做的,没想到竟然是用CSS刻出来的…真是太惊人啦!
接着在找数据的过程中,又发现一个很强的网站:http://bennettfeely.com/clippy/,专门介绍「clip-path」这个CSS3的属性,你可以直接在上面拖拉或修改,除了贝兹曲线外,几乎任何形状都做得出来(中空的部分要用组合的)
如果不考虑一些浏览器支持度的问题,使用clip-path来绘制多边形,还比利用伪元素还制作多边形来得简单许多,而且也可以做到单一div绘制超过八边形,使用伪元素的绘制是直接从长宽着手,而利用clip-path则是要由每个点的坐标着手,因为是座标点的缘故,要做出正多边形就也同样要用到许多基本的三角函式来计算坐标,以下就利用clip-path来绘制圆形、椭圆和正多边形给大家看看。
开始绘制之前,有两点注意事项:
圆形circle(半径at圆心坐标)使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续的线段,若线段彼此有交集,面积区域就会有相减的状况发生(当然如果这是你要的效果就无妨了)。
如果绘制时采用「比例」的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有落差,使用「像素」绘制就没有这种问题。
.circle{ width:100px; height:100px; background:#0cc; -webkit-clip-path:circle(50% at 50% 50%); }椭圆形ellipse(长、短轴半径at圆心坐标)
.ellipse{ width:100px; height:100px; background:#aaa; -webkit-clip-path:ellipse(25% 50% at 50% 50%); }内置矩形inset(上右下左的边距round上右下左圆角
)
.inset{ width:100px; height:100px; background:#99f; -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0); }正三角形
.a{ width:100px; height:87px; background:#c00; -webkit-clip-path:polygon(0% 100%, 50% 0%,100% 100%); }正方形
.b{ width:100px; height:100px; background:#069; -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%); }正五边形
正五边形就要计算一下了,59/(59+95)=38.31%,31/(81*2)=19.14%
.c{ width:162px; height:154px; background:#095; -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%); }正六边形
正六边形的计算比较简单,50/(100+502)=25%,150/(100+502)=75%
.d{ width:200px; height:174px; background:#f80; -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }正七边形
正七边形是这里头需要计算最多的形状,22/(100+622)=10.09%,202/(100+622)=90.18%,43/(43+97+78)=19.72%,(43+97)/(43+97+78)=64.22%,62/(100+622)=27.68%,(100+62)/(100+622)=72.32%
.e{ width:224px; height:218px; background:#09c; -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%); }正八边形
正八边形的计算如下,71/(100+712)=29.34%,(71+100)/(100+712)=70.66%
.f{ width:242px; height:242px; background:#f69; -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%); }搭配clip-path做动画
熟练了clip-path之后,当然就要用它来做点动画,下面提供两个示例,第一个是正多边形的变换,第二个则是三角形的变换组合,虽然看起来很简单,但实际制作起来却要考虑每个点的坐标,为了让形状不要有「翻转」的错觉,形状里头每个点在进行移动的时候,尽可能的不要交错,因为只要一交错,就会有交集的空白产生,就会有不自然或是翻转的现象喔!当然同样的,如果你希望有翻转的效果,应该就要让他们交错啰!
正多边形的变换 三角形的变换组合需要以上两个动画的代码可以加我:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114473.html
摘要:写过向上箭头,对话气泡或其他类似的尖角元素的人都知道,为了创建一个纯实现的三角形,必须使用某些。最流行的两种方式是通过边框实现,或字符。例如,我们无法在三角形上使用背景图片,因为边框和字符只能使用颜色。为了实现三角形,我们需要使用函数。 写过 HTML upvote arrow(向上箭头),speech bubble(对话气泡)或其他类似的尖角元素的人都知道,为了创建一个纯 CSS 实...
阅读 1147·2021-11-10 11:35
阅读 2888·2021-09-24 10:35
阅读 2892·2021-09-22 15:38
阅读 2783·2019-08-30 15:43
阅读 1306·2019-08-29 18:39
阅读 2524·2019-08-29 15:22
阅读 2766·2019-08-28 18:17
阅读 588·2019-08-26 13:37