怎么用clip-path实现CSS形状变换
这篇文章主要讲解了“怎么用clip-path实现CSS形状变换”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用clip-path实现CSS形状变换”吧！
CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，随着浏览器对于CSS3的支持度大幅提升，自然而然的就可以用它来做些与众不同的变化。
运用clip-path超强的网站
最先看到这个属性的应用，是从这个网站看到的： species-in-pieces.com/ ，不得不说这个网站做得实在太神了，一开始看到还真以为是用SVG做的，没想到竟然是用CSS刻出来的…真是太惊人啦！
接着在找数据的过程中，又发现一个很强的网站： bennettfeely.com/clippy/ ，专门介绍「clip-path」这个CSS3的属性，你可以直接在上面拖拉或修改，除了贝兹曲线外，几乎任何形状都做得出来（中空的部分要用组合的）
使用clip-path绘制多边形
如果不考虑一些浏览器支持度的问题，使用clip-path来绘制多边形，还比利用伪元素还制作多边形来得简单许多，而且也可以做到单一div绘制超过八边形，使用伪元素的绘制是直接从长宽着手，而利用clip-path则是要由每个点的坐标着手，因为是座标点的缘故，要做出正多边形就也同样要用到许多基本的三角函式来计算坐标，以下就利用clip-path来绘制圆形、椭圆和正多边形给大家看看。
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
点击： 加入
开始绘制之前，有两点注意事项：
使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续的线段，若线段彼此有交集，面积区域就会有相减的状况发生（当然如果这是你要的效果就无妨了）。
如果绘制时采用「比例」的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有落差，使用「像素」绘制就没有这种问题。
圆形circle（半径at圆心坐标）
.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);
}
image.png
正三角形
.a{
width:100px;
height:87px;
background:#c00;
-webkit-clip-path:polygon(0% 100%, 50% 0%,100% 100%);
}
image.png
正方形
.b{
width:100px;
height:100px;
background:#069;
-webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}
image.png
正五边形
正五边形就要计算一下了，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%);
}
image.png
正六边形
正六边形的计算比较简单，50/（100+50
2）=25%，150/（100+50
2）=75%
.d{
width:200px;
height:174px;
background:#f80;
-webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
image.png
正七边形
正七边形是这里头需要计算最多的形状，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%);
}
image.png
正八边形
正八边形的计算如下，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之后，当然就要用它来做点动画，下面提供两个示例，第一个是正多边形的变换，第二个则是三角形的变换组合，虽然看起来很简单，但实际制作起来却要考虑每个点的坐标，为了让形状不要有「翻转」的错觉，形状里头每个点在进行移动的时候，尽可能的不要交错，因为只要一交错，就会有交集的空白产生，就会有不自然或是翻转的现象喔！当然同样的，如果你希望有翻转的效果，应该就要让他们交错啰！
正多边形的变换
三角形的变换组合
感谢各位的阅读，以上就是“怎么用clip-path实现CSS形状变换”的内容了，经过本文的学习后，相信大家对怎么用clip-path实现CSS形状变换这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！