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%);}