摘要：使用透明蒙版等在四个角画三角形来遮罩出六边形我们来一一试验使用透明蒙版如果纯色背景还可以，但是背景要求透明的，所以第一种看样子不大可能了。
我们在处理图片，比如用户头像的时候，通常上传的都是矩形图片
例如：
有时候根据设计师的需求，会要求是圆形或者带圆角，这时候我们通常使用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当做蒙版，这时输出的图片已经是六边形的了。
那白色边框怎么办？
既然头像大小是固定的，渲染出来六边形也是固定的，那就。
切一个盖在上面吧。
demo：
http://jsfiddle.net/chromefans/p3t6pdqe/1/embedded/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111008.html
这是这个系列的第二篇，第一篇这见 这里： 以下是这个系列的简洁 UI 的 7 条规则： 光来自天空 (Light comes from the sky) 黑白优先 (Black and white first) 加倍你的空白 (Double your whitespace) 学习在图像上叠加文本的方法 ( Learn the methods of overlaying text on image...
阅读 1893·2021-11-24 09:39
阅读 3421·2021-10-09 09:41
阅读 898·2021-09-10 11:25
阅读 1468·2021-09-08 10:42
阅读 3495·2021-09-06 15:00
阅读 2330·2019-08-30 15:54
阅读 2950·2019-08-29 17:08
阅读 3149·2019-08-29 11:26
