CSS中甚至可以这样吗？

Question

是否可以通过这种方式重叠2张图片？

想象一下，你有两张图像，就像60％的图像一样。它们应该重叠，但是通过对角线切口。

Answer 1

要么使用CSS Masking，要么使用CSS3转换旋转：

-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);

您可以将一个内部容器旋转45度，将该容器内的图像旋转-45度，使其再次平直。结果是对角线边框。添加z-index和绝对定位，你就得到了结果。

这是一个演示。

.container {
    width: 500px;
    height: 200px;
    margin: 50px;
    overflow:hidden;
    position: relative;
    border: 2px solid #666;
}
.img1 {
    border-right: 2px solid #666;
    position: absolute;
    width: 300px;
    height: 600px;
    overflow: hidden;
    left: -75px;
    top: -230px;
    z-index: 2;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.img1 img {
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.img2 {
    position: absolute;
    width: 350px;
    overflow: hidden;
    left: 150px;
    z-index: 1;
}

<div class="container">
    <div class="img1"><img src="http://lorempixel.com/output/city-q-c-600-300-7.jpg" /></div>
    <div class="img2"><img src="http://lorempixel.com/output/city-q-c-600-300-10.jpg" /></div>
</div>