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

Question

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

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

Answer 1

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

演示

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