<div class="container">
<img class="img_top" src="https://bicool-public.oss-cn-shenzhen.aliyuncs.com/u/33/assets/squirrel-640_419.jpg" />
<img class="img_bottom" src="https://bicool-public.oss-cn-shenzhen.aliyuncs.com/u/33/assets/squirrel-640_419.jpg" />
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
height: 100%;
background-color: #000;
display:flex;
align-items: center;
justify-content:center;
}
.container {
}
.img_top, .img_bottom {
width: 200px;
display: block;
}
.img_bottom {
transform: rotateZ(180deg) rotateY(180deg) translateY(-15px);
-webkit-mask-image: linear-gradient(transparent 50%, #000 100%);
}
预览
控制台