css mask实现图片重叠,图片切角

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
这是一个非常有趣的元素,可以实现元素遮罩部分,点击查看mdn-mask的文档
也可以通过如下的demo来了解这个属性的有趣之处,我们实现的效果如下

demo

这个demo并不是一张图片,而是两张图片在一起实现的效果,只需要加一行mask即可实现,代码如下




    
    
    
    mask demo
    


    

可以自行copy代码查看效果,利用mask来实现的图片重叠,接下来是切角


切角效果图



    
    
    
    mask demo
    


    

很有意思的属性,大家可以自己试试,不过mask兼容性很差

关于浏览器的支持程度

mask支持程度

你可能感兴趣的:(css mask实现图片重叠,图片切角)