2

很难用语言表达我想要完成的事情，因此请查看这张图片以获取示例：

示例背景图像

如您所见，我希望创建一个带有图案背景的倾斜 div（简单），但另一部分，即倾斜半覆盖的部分，也必须有背景图像。我想了很多不同的想法，并尝试使用 background-clip、background-origin、div 和 CSS 三角形之前和之后的作品。有没有办法在纯 CSS 中做到这一点？我喜欢不必将图像组合成一个或在这里做任何照片购物。

4

2 回答 2

6

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

演示

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-13T20:20:42.330 回答
0

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

于 2013-03-13T18:47:02.533 回答