Css实现图片斜切效果

css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。

渐变图作为mask,置于另一张图片上面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#mask {
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 100%;
			    height: 100%;
			    background: url("http://www.duanlonglong.com/images/defaultpic.gif");
			    background-size: cover;
			    -webkit-mask-image: linear-gradient(120deg, transparent 50%, white 50%);
			}
		</style>
	</head>
	<body>
		<div id="images">
		    <img src="http://www.duanlonglong.com/images/defaultpic.gif">  
		    <div id="mask"></div>
		</div>
	</body>
</html>

效果图:

attachments-2020-07-VEEKghlI5f03f141a8f31.png

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/462.html