带有背景图片的 CSS3 倾斜 div，整个图片后面有图片

Question

很难用语言表达我想要完成的事情，所以请查看这张照片作为示例:

如您所见，我希望创建一个带有图案背景的倾斜 div(简单)，但另一部分，即倾斜被半遮住的部分，也必须有背景图像。我想到了很多不同的想法，并尝试在 div 和 CSS 三 Angular 形之前和之后使用 background-clip、background-origin，这些都是可行的。有没有办法在纯 CSS 中做到这一点？我喜欢不必将图像组合成一个图像或在此处进行任何 Photoshop。

Answer 1

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