clip-path切基本图形

我们都知道，在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥，就算是有创意，前端实现也将付出巨大的开发成本。

 

虽然在很早之前，就可以用元素实现多边形，但多部分需要借助伪元素，多个其他元素来实现，不过还好有clip-path的出现，切一些基本图形，及其基本图形组合图形。

 

                      

 

接下来，我们就了解一下这个属性的使用吧。

 

一.基本概念

 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。兼容性页蛮高的。

 

 

二.画一些基本图形

如果不考虑一些浏览器支持度的问题，使用clip-path来绘制多边形，还比利用伪元素还制作多边形来得简单许多，而且也可以做到单一div绘制超过八边形，使用伪元素的绘制是直接从长宽着手，而利用clip-path则是要由每个点的坐标着手，因为是座标点的缘故，要做出正多边形就也同样要用到许多基本的三角函式来计算坐标，以下就利用clip-path来绘制圆形、椭圆和正多边形给大家看看。

开始绘制之前，有两点注意事项：

• 使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续的线段，若线段彼此有交集，面积区域就会有相减的状况发生（当然如果这是你要的效果就无妨了）。
• 如果绘制时采用「比例」的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有落差，使用「像素」绘制就没有这种问题。

 clip-path可以通过专有名词属性值很容易的画出一些简单的图形，例如圆(circle)，椭圆(ellipse)，圆角矩形(inset)：

1.椭圆

div.item_cont .item:nth-child(8){
	clip-path:ellipse(25% 50% at 50% 50%);
	background: #C4C4C4;
}

 

2.圆

div.item_cont .item:nth-child(7){
	background: #00CCCE;
    clip-path:circle(50% at 50% 50%);
}

 

3.圆角矩形

div.item_cont .item:nth-child(9){
	clip-path:inset(20% 0 round 0 20%);
	background: #9A99FF;
}

 

当然也可以用(polygon)绘制多边形：

1.五角星，目测的坐标点：

div{
	width: 200px;
	height: 200px;
	background: url(../jsbase/瀑布流/picture/9.jpg) no-repeat center / cover;
	margin: 10px;
	clip-path: polygon(100% 39%,66% 32%,50% 3%,32% 32%,0 39%,24% 64%,19% 97%,50% 84%,81% 97%,76% 64%);
}

         

2.菱形

div.item_cont .item:nth-child(4){
	clip-path: polygon(100% 50%, 50% 0,0 50%,50% 100%);
	background: url(../jsbase/瀑布流/picture/6.jpg) no-repeat center / cover;
}

   

3.×

div.item_cont .item:nth-child(5){
	clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 2s;
}		

4. 正五角星

div.item_cont .item:nth-child(6){
	clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
	background: url(../jsbase/瀑布流/picture/8.jpg) no-repeat center / cover;
}

          

5.三角形

div.item_cont .item:nth-child(1){
	clip-path: polygon(100% 100%,50% 0,0 100%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 1s;
	clip-path: rec;
}

div.item_cont .item:nth-child(2){
	clip-path: polygon(100% 0,0 100%,100% 100%);
	background: url(../jsbase/瀑布流/picture/2.jpg) no-repeat center / cover;
	animation-duration: 4s;
}

6.提示框

div.item_cont .item:nth-child(10){
	clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 1.2s;
}

当然，你还可以结合css3动画让它动起来：

 

参考：运用clip-path的纯CSS形状变换

          CSS的clip-path