css中clip-path屬性的運用


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

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

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

enter image description here

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

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

CSS Shapes Module中的基礎形狀提供了一個非常方便的使用clip-path的方法。它有多種不同的可以使用的形狀如polygon,circleellipse 和 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%);
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM