CSS3倾斜div与背景图像，整个事物背后的图像

Question

很难说出我想要完成的事情，所以请查看此图片以获取示例：

正如你所看到的，我希望创建一个带有图案背景的倾斜div（简单），但是另一部分，即倾斜半遮盖的部分，也必须有背景图像。我已经想到了很多不同的想法，尝试使用背景剪辑，背景原点，div和CSS三角形之前和之后的作品。在纯CSS中有没有办法做到这一点？我喜欢不必将图像组合成一个或在这里进行任何photoshopping。

Answer 1

您需要使用偏斜变换。顶部的一个div，底部的一个div，使它们倾斜，然后为你实际应用背景的每一个取消:before伪。

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 */
}

Answer 2

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