今天做新的布局樣式，其中有個圖片樣式是這樣的。如下：
很明顯，可以發現圖片多了一個三角形且三角形屬于圖片的一部分。一開始我的做法是在圖片的左側覆蓋三個div，分別為兩個長方形和一個透明的三角形。后來，發現這種做法比較難調好，而且當這種樣式下的背景變了顏色后還得去更新這三個div的背景色，維護及更新麻煩。
于是乎，記得之前有看到某篇博客是講css3是可以支持這種多種形狀裁剪圖片的。找了下資料，發現css3的clip-path可以實現這種多邊形的圖片裁剪。但是它的兼容性不是很好，如下圖：
由于這個css3屬性其實就是從之前的svg（伸縮矢量圖形）整合進來的，于是就試著用svg來實現這個樣式，發現效果比之前的做法好很多。且它的瀏覽器兼容性兼容到ie9+(包括ie9)， 其他的Firefox，Chrome，Opera和Safari也都支持，在蘋果，安卓各種機型測試都沒發現問題。果斷使用之。如下代碼：
<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標簽、polygon標簽和image標簽的寬高、points等屬性都可以通過JavaScript去動態設置，因此可以先靜態引入svg再去設置寬高屬性，及精確定位要裁剪多邊形的點。這里如果不知道這么定位這些點的話可以參考下面的鏈接：bennettfeely.com/clippy，每個點都有寬和高，根據圖片的寬高及具體的百分比算出具體的點的“坐標”就可以了。
這里的preserveAspectRatio屬性是保持原始比例的意思，我這里的需求不需要，所以設置為none(及拉伸的作用)。詳情也可以從下面的鏈接了解：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
最后，注意一個svg內容標簽大小寫的小坑：
當在 HTML 里直接寫靜態的 SVG 內容時, 無論你使用的是 clipPath 標簽還是 clippath 標簽都可以；如果頁面上已經有解析過 clipPath 元素后, 那么動態創建時無論你使用 clipPath標簽 還是 clippath標簽也是可以的；但是如果你是第一次動態創建這個clipPath標簽元素時，clipPath里的“P”一定要大寫，不然裁剪會失效。
