css | 不規則 的圖片 clip-path__web

“我就係風魔萬千前端開發，改造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

簡書：http://www.jianshu.com/p/1c241fdca3a1