在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>