我們在處理圖檔，比如使用者頭像的時候，通常上傳的都是矩形圖檔
例如：
有時候根據設計師的需求，會要求是圓形或者帶圓角，這時候我們通常使用css border-radius來達到這一效果：
css.avatar {
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
}
.avatar > img {
width: 100%;
height: 100%;
}
但是這次遇到的一個需求是，圖檔要不規則顯示出來，設計稿中是這樣的
好我們來想可能辦法，總體思路是遮罩，難點是遮罩出的圖檔是不規則，要有白色邊框，背景透明。
使用png透明蒙版
css shape、clip等
在四個角畫三角形來遮罩出六邊形
canvas
svg
我們來一一試驗：
使用png透明蒙版
如果純色背景還可以，但是背景要求透明的，是以第一種看樣子不大可能了。
css shape、clip等
css-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
這樣确實可以畫出來六邊形，背景也可以是透明，如果仔細研究還有可能畫出白色的邊框但是
這樣畫出來是完全的标準六邊形，而設計稿是帶設計師傲嬌的圓角的，顯然不符合精準還原。
http://jsfiddle.net/chromefans/30oepvhz/3/embedded/
在四個角畫三角形來遮罩出六邊形
這樣也确實可以畫出六邊形，但是實作出來效果和css shape一樣，标準六邊形，隻是相容性要好一些。
canvas
我這裡沒做canvas的demo，就不示範了，如果實在沒有完美的方式，就回來用canvas。
svg
好的，終于碼到這裡了……
在經過一系列研究探讨之後，發現了這篇文章
http://www.html5rocks.com/en/tutorials/masking/adobe/
文中很巧妙的實作了在不規則情況下顯示圖檔，還可以透明背景，在查閱mdn後，還原了設計稿。
還原一下步驟，這個方式需要設計師配合導出一個處理好透明區域的svg，在使用-webkit-mask-box-image方法把svg當做蒙版，這時輸出的圖檔已經是六邊形的了。
那白色邊框怎麼辦？
既然頭像大小是固定的，渲染出來六邊形也是固定的，那就。
切一個蓋在上面吧。