今天看到一位同學的需求,要在一個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%);
}