今天做新的布局樣式死姚，其中有個圖片樣式是這樣的账劲。如下：
很明顯，可以發(fā)現(xiàn)圖片多了一個三角形且三角形屬于圖片的一部分。一開始我的做法是在圖片的左側(cè)覆蓋三個div，分別為兩個長方形和一個透明的三角形。后來嚣镜，發(fā)現(xiàn)這種做法比較難調(diào)好徽职，而且當(dāng)這種樣式下的背景變了顏色后還得去更新這三個div的背景色陶冷，維護及更新麻煩赤屋。
于是乎涩僻，記得之前有看到某篇博客是講css3是可以支持這種多種形狀裁剪圖片的室抽。找了下資料，發(fā)現(xiàn)css3的clip-path可以實現(xiàn)這種多邊形的圖片裁剪。但是它的兼容性不是很好栈雳，如下圖：
由于這個css3屬性其實就是從之前的svg（伸縮矢量圖形）整合進來的厌秒，于是就試著用svg來實現(xiàn)這個樣式蚌讼，發(fā)現(xiàn)效果比之前的做法好很多。且它的瀏覽器兼容性兼容到ie9+(包括ie9)霹崎， 其他的Firefox簿晓，Chrome，Opera和Safari也都支持，在蘋果，安卓各種機型測試都沒發(fā)現(xiàn)問題孵奶。果斷使用之僻肖。如下代碼：
<svg xmlns="http://www.w3.org/2000/svg" width="145" height="91">
<defs>
<clipPath id="clippath"><polygon points="6 0,145 0,145 91,6 91,6 35,2 31,6 25"></polygon></clipPath>
</defs>
<image xmlns:link="http://www.w3.org/1999/xlink" link:href="http://這里放圖片鏈接" width="145" height="91" preserveAspectRatio="none" style="clip-path:url(#clippath);">
</image>
</svg>
svg標(biāo)簽搀玖、polygon標(biāo)簽和image標(biāo)簽的寬高、points等屬性都可以通過JavaScript去動態(tài)設(shè)置肥惭，因此可以先靜態(tài)引入svg再去設(shè)置寬高屬性滞伟，及精確定位要裁剪多邊形的點。這里如果不知道這么定位這些點的話可以參考下面的鏈接：bennettfeely.com/clippy督禽，每個點都有寬和高，根據(jù)圖片的寬高及具體的百分比算出具體的點的“坐標(biāo)”就可以了稳强。
這里的preserveAspectRatio屬性是保持原始比例的意思，我這里的需求不需要俊抵，所以設(shè)置為none(及拉伸的作用)刹帕。詳情也可以從下面的鏈接了解：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
最后，注意一個svg內(nèi)容標(biāo)簽大小寫的小坑：
當(dāng)在 HTML 里直接寫靜態(tài)的 SVG 內(nèi)容時, 無論你使用的是 clipPath 標(biāo)簽還是 clippath 標(biāo)簽都可以侦另；如果頁面上已經(jīng)有解析過 clipPath 元素后, 那么動態(tài)創(chuàng)建時無論你使用 clipPath標(biāo)簽 還是 clippath標(biāo)簽也是可以的；但是如果你是第一次動態(tài)創(chuàng)建這個clipPath標(biāo)簽元素時支竹，clipPath里的“P”一定要大寫，不然裁剪會失效卑雁。
