使用CSS的clip-path:polygon裁剪图片斜边三角:非遮罩去掉多余的部分

最近小程序要实现斜切效果,又不能使用遮罩,于是搜到clip-path裁切方法。
要实现的效果如下:
20220503211254.jpg

演示效果如下:


原理如下:
TB2GihXoZnI8KJjSspeXXcwIpXa_!!1083656586.png
主要就是使用如下代码裁剪了
/*使用clip-path剪切掉多余的部分*/
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 280px 100%, 0 100%); 

安卓小程序上显示效果
Screenshot_20220503-213324.jpg

暧昧贴

发表评论

    微笑 大笑 拽 大哭 奸笑 流汗 喷血 生气 囧 不爽 晕 示爱 卖萌 吃惊 迷离 爱你 吓死了 呵呵