傾斜的div使用CSS和透明度

Question

我已經看到關於這個問題的幾個問題，他們都似乎使用純色背景來創建斜面，如果這是一個重複的另一個問題，我道歉，我試圖尋找這無盡的。

問題：我想知道如何傾斜一個div的一側或既達到以下，同時也使跨瀏覽器兼容，並響應最終結果。

我附上了兩張圖片以幫助演示。

注意：如果有人在div中有文本，我不希望它偏斜。如果不能單獨使用CSS，請提供一個js版本。

兩個圖像：

最終結果是：

Answer 1

再次旋轉使用SVG您獲得更好的瀏覽器支持超過夾路徑+其他一些很酷的東西。

.clip-block { 
 
    text-align: center; 
 
} 
 

 
.clip-wrap { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 0; 
 
    margin: 0 20px; 
 
} 
 

 
.clip-svg { 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.clip-svg-1 { 
 
    width: 200px; 
 
    height= 200px; 
 
    -webkit-clip-path: url("#clip-polygon"); 
 
    clip-path: url("#clip-polygon"); 
 
} 
 
.clip-svg-2 { 
 
    width: 200px; 
 
    height= 200px; 
 
    -webkit-clip-path: url("#clip-polygon2"); 
 
    clip-path: url("#clip-polygon2"); 
 
    margin-top: -104px; 
 
}

<div class="clip-block"> 
 
    <div class="clip-wrap"> 
 
    <img src="http://lorempixel.com/200/200/animals/4" alt="" class="clip-svg-1"> 
 
    </div> 
 
</div> 
 

 
<div class="clip-block"> 
 
    <div class="clip-wrap"> 
 
    <img src="http://lorempixel.com/200/200/animals/6" alt="" class="clip-svg-2"> 
 
    </div> 
 
</div> 
 
<svg class="clip-svg"> 
 
    <defs> 
 
    <clipPath id="clip-polygon" clipPathUnits="objectBoundingBox" > 
 
     <polygon points="0 0.5, 0 0, 1 0, 1 1" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<svg class="clip-svg"> 
 
    <defs> 
 
    <clipPath id="clip-polygon2" clipPathUnits="objectBoundingBox" > 
 
     <polygon points="0 1, 0 0, 1 0.5, 1 1" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg>

Answer 2

此使用clip-path和position: absolute是在CSS可能。 （不幸的是，這不會在Firefox或IE瀏覽器）在所有現代瀏覽器來得到這樣的結果

div { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 400px; 
 
    width: 500px; 
 
} 
 
.img1 { 
 
    background-image: url(http://i.stack.imgur.com/E9Sl2.jpg); 
 
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0); 
 
    clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0); 
 
} 
 
.img2 { 
 
    background-image: url(http://i.stack.imgur.com/Nl3Fw.jpg); 
 
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%); 
 
clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%); 
 
}

<div class="img1"></div> 
 
<div class="img2"></div>

Answer 3

一種方法是通使用額外的div，含有至少的圖像。

這個div將被旋轉，溢出的隱藏，然後裏面的背景相反的方向

.base { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-image: url(http://placekitten.com/1000/750); 
 
    background-size: cover; 
 
} 
 

 
.image2 { 
 
    position: absolute; 
 
    width: 120%; 
 
    height: 70%; 
 
    bottom: 50%; 
 
    left: -10%; 
 
    transform: rotate(15deg); 
 
    overflow: hidden; 
 
} 
 

 
.image2:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 140%; 
 
    top: 20%; 
 
    left: 10%; 
 
    transform: rotate(-15deg); 
 
    background-image: url(http://placekitten.com/1200/900); 
 
    background-size: cover; 
 
}

<div class="base"> 
 
<div class="image2"></div> 
 
</div>