很難用語言來表達我所要完成的，所以看看這個圖片的樣本後面的圖像：CSS3傾斜的div背景圖像，整個事情

，你可以看，我正在創建一個帶有圖案背景的傾斜的div（容易），但另一部分，傾斜半覆蓋的部分也必須有背景圖片。我想到了很多不同的想法，並嘗試使用背景剪輯，背景源，divs和CSS三角形之前和之後的作品。有沒有辦法在純CSS中做到這一點？我喜歡不必將圖像合併爲一個或在這裏做任何photoshopping。

來源

2013-03-13 trlemburg

如何創建在GIMP或Photoshop自定義背景圖片，然後將其放置到您的HTML代碼？ – blackhawk 2013-03-13 18:41:13

那麼背景圖像的容器又是如何的呢，然後裏面有另一個圖像是傾斜的角度？你可以按照你想要的方式排列它。 – PlantTheIdea 2013-03-13 18:41:25

爲您的圖層設置z-index屬性並將它們放在任何需要的位置。請務必使用z-index屬性在div上設置位置，否則您可能會遇到錯誤

來源

2013-03-13 18:47:02

您需要使用傾斜變換。頂部的一個div，最下面的一個div，傾斜它們，然後解開一個:before pseudo，爲每個背景實際應用背景。

demo

HTML：

<div class='wrap'> 
    <div class='s'></div> 
    <div class='s'></div> 
</div>

相關CSS：

.wrap { width: 4em; height: 28em; } 
.s { 
    overflow: hidden; 
    height: 50%; 
    transform: skewY(-30deg); 
} 
.s:before { 
    display: block; 
    height: 100%; 
    transform: skewY(30deg); 
    content: ''; 
} 
.s:first-child:before { 
    margin: 2em /* width*sin(abs(skew_angle)) = 4em*sin(30deg) */ 0 0; 
    background: url(image.jpg) 50% 50%; 
} 
.s:last-child:before { 
    margin: -2em /* -width*sin(abs(skew_angle)) */ 0 0; 
    /* pattern background */ 
}

來源

2013-03-13 20:20:42 Ana

CSS3傾斜的div背景圖像，整個事情

回答

demo

相關問題