在CSS中甚至有可能这样吗？

Question

这样可以使2张图片重叠吗？

想象一下，您有2张图像，都是60％的图像。它们应该重叠，但通过斜切。

Answer 1

要么你使用CSS屏蔽或你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>