问题描述：

很难用语言来表达我所要完成的，所以看看这个图片的样本后面的图像：CSS3倾斜的div背景图像，整个事情

，你可以看，我正在创建一个带有图案背景的倾斜的div（容易），但另一部分，倾斜半覆盖的部分也必须有背景图片。我想到了很多不同的想法，并尝试使用背景剪辑，背景源，divs和CSS三角形之前和之后的作品。有没有办法在纯CSS中做到这一点？我喜欢不必将图像合并为一个或在这里做任何photoshopping。

如何创建在GIMP或Photoshop自定义背景图片，然后将其放置到您的HTML代码？ – blackhawk 2013-03-13 18:41:13

那么背景图像的容器又是如何的呢，然后里面有另一个图像是倾斜的角度？你可以按照你想要的方式排列它。 – PlantTheIdea 2013-03-13 18:41:25

答

为您的图层设置z-index属性并将它们放在任何需要的位置。请务必使用z-index属性在div上设置位置，否则您可能会遇到错误

答

您需要使用倾斜变换。顶部的一个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 */ 
}

CSS3倾斜的div背景图像，整个事情

demo

相关推荐