CSS样式clip-path绘制图形裁剪图片
CSS样式clip-path绘制图形裁剪图片
发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用，几乎任何形状都可以做出来，下面使用clip-path制作正三边形至正八边形以及其它图形的方法，并且有些正多边形需要通过一定的计算，顺便放了计算公式。通过应用这些正多边形和其它的形状的实现方法来学习clip-path这个样式。
先看看兼容性：
看完兼容之后，你可确定是否在你的项目中应用这个clip-path样式，接下来用实例来学习一下这个样式。
图片裁剪
通过上面方法绘制图形，然后设置背景图片，即可达到裁剪图片的目的
div{
-webkit-clip-path: polygon(52% 7%, 19% 73%, 92% 61%);
clip-path: polygon(52% 7%, 19% 73%, 92% 61%);
background-color: #d3d0c9;
background-image: url(pics/pittsburgh.jpg);
background-size: cover;
background-position: center center;
}上面裁剪的例子，一堆数字值看上去十分晕，你不清楚它为什么这么写，就像我不清楚为什么女生上厕所要成群结队呢？是这样吗？
跑题了?，此刻不知道想什么.... ，
下面来十来个例子，助你搞定这个样式的用法。
正三角形
div{
width:100px;
height:87px;
background:#25883D;
-webkit-clip-path:polygon(0% 100%, 50% 0%,100% 100%);
}正四边形（正方形）
div{
width:100px;
height:100px;
background:#4AE90E2;
-webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}正五边形
正五边形需要计算一下，59/(59+95)=38.31%，31/(81*2)=19.14%:
div{
width:162px;
height:154px;
background:#B8E986;
-webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}正六边形
正六边形的计算比较简单，50/(100+50*2)=25%，150/(100+50*2)=75%:
div{
width:200px;
height:174px;
background:#B8E986;
-webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}正七边形
正七边形是这里计算需要的步数是最多的：22/(100+62*2)=10.09%，202/(100+62*2)=90.18%，43/(43+97+78)=19.72%，(43+97)/(43+97+78)=64.22%，62/(100+62*2)=27.68%，(100+62)/(100+62*2)=72.32%:
div{
width:224px;
height:218px;
background:#9013FE;
margin: 50px auto;
-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+71*2)=29.34%，(71+100)/(100+71*2)=70.66%:
div{
width:242px;
height:242px;
background:#FF70F9;
-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%);
}圆形 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:#D8D8D8;
-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);
}正多变形动画实例
<style>
.s{
width:100px; height:87px;
-webkit-animation:s 5s infinite linear alternate;
}
.a{
width:100%;height:100%;
-webkit-clip-path:polygon(0% 100%, 50% 0%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%);
-webkit-animation:a 5s infinite linear alternate;
}
@-webkit-keyframes s{
0%,5%{width:115px;height:100px;}
24%{width:100px;height:100px;}
43%{width:105px;height:100px;}
62%{width:114px;height:100px;}
81%{width:103px;height:100px;}
95%,100%{width:100px;height:100px;}
}
@-webkit-keyframes a{
0%,5%{
background:#c00;
-webkit-clip-path:polygon(0% 100%, 50% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% );
}
24%{
background:#069;
-webkit-clip-path:polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% ); }
43%{
background:#095;
-webkit-clip-path:polygon(19.14% 100%, 0% 38.31%, 50% 0%, 100% 38.31%, 80.86% 100%, 80.86% 100%, 80.86% 100%, 80.86% 100% ); }
62%{
background:#f80;
-webkit-clip-path:polygon(25% 100%, 0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 75% 100%, 75% 100% ); }
81%{
background:#09c;
-webkit-clip-path:polygon(27.68% 100%, 0% 64.22%, 10.09% 19.72%, 50% 0%, 90.18% 19.72%, 100% 64.22%, 72.32% 100%, 72.32% 100% ); }
95%,100%{
background:#f69;
-webkit-clip-path:polygon(29.34% 100%, 0% 70.66%, 0% 29.34%, 29.34% 0%, 70.66% 0%, 100% 29.34%, 100% 70.66%, 70.66% 100% );
}
}
</style>HTML代码
<div class="s">
<div class="a"></div>
</div>相关参考链接：
W3C：https://www.w3.org/TR/css-masking-1/#the-clip-path
clip-path在线制作工具：http://bennettfeely.com/clippy/［★★★★★］
查看兼容：http://caniuse.com/#search=clip-path
腾讯云开发者
