利用mask-image蒙层编写异形头像

需求：后台给了一个规规矩矩的头像，或圆或方，UI要求展示成水滴的形状。正在想到底如何实现的时候，不由自主去翻了鑫神的博客，正好找到了答案，窃喜（·_·)

UI给的形状：

后台给的头像（忽略橙色背景色，我加的...）

最终需要的效果：

PS：被覆盖图像的宽高与目标形状图越接近越好

废话不多说，贴代码：(本栗子截取的是小程序的代码片段，同样适用于普通h5页，只是标签不同而已·.·)

wxml片段：

　　<view class="avatar1-box">

        <image src="../../images/zhangyixing_120.png" class="avatar1"></image>

      </view>

 

wxss片段：

.avatar1-box {

  width: 280px;

  height: 337px;

  -webkit-mask-image: url('../../images/1st-avatar-mask.png'); //蓝色水滴形状图

  mask-image: url('../../images/1st-avatar-mask.png'); //蓝色水滴形状图

  -webkit-mask-size: 100% 100%;

  mask-image-size: 100% 100%;

}

.avatar1 {

  width: 337px;

  height: 337px;

}

参考文章：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/