6.CSS | “百变”图片秀 clip-path

“我就係風魔萬千前端開發，改造web風氣，刺激圖片市場，提高代碼內涵，玉樹臨風，風度翩翩的css專家之一，我個名叫剪切路徑，英文名叫clip-path”。

——题记，改编源自《整蛊专家》

正文

话说我们上回讲道：如何利用css实现多边形，综之原理便是利用width、height为0，结合border，一个纯多边形在代码下诞生了。那么，图片呢，我突然想让图片也显示的不规则，咋弄。今天便来讲讲如何利用css实现图片的“不规则”，先上张简单的效果图：

效果图

刚拿到这张图，看起来简单吧，就缺了一个角呀，有何难，我可以用，用，用啥？clip好像不行，只能剪切矩形，更何况它已经要退出web江湖了。画width与height为0的多边形形状？不是吧。

在本文的题记中，出现了一个词，叫clip-path，没错，就系用它。

我们写前端的相信知道，刚开始的图片都是一个矩形，可利用border-radius变成圆形，或者直接一张不规则的png扔上来，clip-path怎么破呢。

初始图

放大招，clip-path：

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);

然后开始的效果图就出现了，代码如下：

css代码

clip-path是一个剪切的路径，上图注释的是clip-path的其他属性，而polygon相信将会是用到比较多的一个属性，它可以建立不规则的图片，polygon(坐标，坐标……)，这些坐标连成最终要显示的区域，比如：

-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

再比如：

五角星

可以加些动画，代码见下：

.rec-pic { position: absolute; width: 250px; height: 200px; background-color: #fcc; animation: star 1s alternate infinite; }

.pic { width: 250px; height: 200px; background: url(../images/pic.jpg) no-repeat center; background-size: cover; }

@keyframes star {

0% {-webkit-clip-path: polygon(50% 0, 60% 30%, 100% 30%, 65% 60%, 75% 100%, 50% 75%, 25% 100%, 35% 60%, 0 30%, 40% 30%);}

100% {-webkit-clip-path: polygon(50% 10%, 60% 20%, 80% 30%, 65% 50%, 65% 80%, 50% 76%, 35% 80%, 35% 50%, 20% 30%, 40% 20%);}

}

五六七八九边行的图片显示区域均不在话下，当然还可以制作出：

MDN效果图

这是利用-webkit-clip-path: url(#cross); “#cross”是自己画的svg，随心所欲，创作自己想要的图像。妙哉，妙哉！

更多可参考clip-path文档：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path