css中clip-path屬性的運用

今天看到一位同學的需求，要在一個div中加一個小尖尖，對話時發的圖片，旁邊這個三角是怎么實現與圖片的顏色一致，效果如下：

當然，解決這個問題有各種奇淫巧技，現在我們來看一個css屬性clip-path，很炫酷。

看屬性，肯定要說兼容性問題，clip-path之所以沒有很普及，也是因為其瀏覽器兼容問題。很多IE瀏覽器對齊屬性不是很支持。我們看下他的瀏覽器兼容：

我們看到IE是完全不支持，盡量使用webkit內核，需要加上內核前綴-webkit-（轉自haorooms博客）。

clip-path，包括了一條閉合的矢量路徑，它可以是CSS中定義的基礎形狀，也可以是包含了clipPath標簽的SVG元素。在閉合路徑內的內容會顯示，而路徑外邊的都會被剪掉。

CSS Shapes Module中的基礎形狀提供了一個非常方便的使用clip-path的方法。它有多種不同的可以使用的形狀如polygon,circle, ellipse 和 inset；其中，inset是矩形。

基本語法：

.element {

      clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

}

跨瀏覽器的代碼寫法：

.element {

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

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

    -webkit-clip-path: url("#clip-shape"); /* 在Webkit或Blink瀏覽器中需要添加，如果你只使用內聯SVGclipping path，而不是CSS clip-path的話 */ clip-path: url("#clip-shape");

}

.clip {

    /* 引用一個內聯的 SVG <clipPath> 路徑*/ clip-path: url(#c1);

    /* 引用一個外部的 SVG 路徑*/ clip-path: url(path.svg#c1);

    /* 多邊形 */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

    /* 圓形 */ clip-path: circle(30px at 35px 35px); /* 橢圓 */ clip-path: ellipse(65px 30px at 125px 40px);

    /* inset-rectangle() 將會替代 inset() ? */

    /* rectangle() 有可能出現於 SVG 2 */

    /* 圓角 */ clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

看完是不是想吐槽了，這參數設置好頭疼啊。。。哈哈，推薦一個maker工具，你畫好圖形，代碼就在下面。。。

鏈接接着，走好不送——http://bennettfeely.com/clippy/，這個網站貌似掛了。。。

瞅瞅這個吧：

http://tools.jb51.net/code/css3path

追加：最近做了一個類似的“VS的上下碰撞產生PK”的動畫效果：

 

.pkup{

　　-webkit-clip-path: polygon(0 0, 100% 0, 100% 35%, 0 60%);
　　clip-path: polygon(0 0, 100% 0, 100% 35%, 0 60%);
}

.pkdown{

　　-webkit-clip-path: polygon(0% 60%, 100% 35%, 100% 100%, 0 100%);
　　clip-path: polygon(0% 60%, 100% 35%, 100% 100%, 0 100%);
}