Html 在拐角处重叠的Div背景

有几个独立的背景图像，从上到下显示。是否可以使它们稍微重叠，并在右下角剪裁一个透明的三角形区域，以显示下面的图像

这在CSS中是可能的吗

以下是所需的外观：

---

是的，这在CSS中是很可能的

下面是一种使用旋转div和

：before

伪元素的技术。这看起来是一个很长的解释，但基本原理是相当直接的，一旦你开始拨弄

兼容性：-IE9中的

transform

属性需要

-ms-

前缀，Safari需要

-webkit-

前缀。它们应该放在未固定的财产之前

包装纸 包装器用于剪裁每个div的斜角

• 提供合适的最大和最小宽度
• 使用

  溢出：隐藏
  

潜水艇 div用于通过剪切其子对象的右下角来创建斜面

• 使用变换进行旋转：旋转（）
• 使用

  溢出：隐藏
  

• 用

  width:200%

  吹出宽度，以便用包装纸夹住拐角
• 将每个div（第一个div除外）向上移动一个负边距
• 使用

  z-index

  更改z顺序，使每个div与前面的div重叠

：在

伪元素之前

：before

提供实际背景图像，无需任何额外标记

• 以相同的度数反向旋转div父对象
• 提供背景图像
• 根据需要使用变换原点进行变换

直边由图像的底边提供，角点由父对象截断。图像必须非常大，才能与其父图像的宽度重叠

完整示例

.wrap{
保证金：0自动；
最大宽度：1000px；
最小宽度：660px；
溢出：隐藏；
背景：#EEE；
}
.wrap>div{
变换：旋转（-15度）；
高度：700px；
宽度：200%；
溢出：隐藏；
变换原点：0.90%；
位置：相对位置；
z指数：10；
}
.wrap>div:before{
内容：''；
显示：块；
宽度：100%；
身高：100%；
背景：url(http://lorempixel.com/output/food-q-c-1500-1000-2.jpg)不重复；
变换：旋转（15度）；
位置：绝对位置；
变换原点：30%0；
}
.wrap>div:n个子项（n+2）{
利润上限：-140px；
}
.wrap>div:n子级（2）：之前{
背景图片：url(http://lorempixel.com/output/people-q-c-1500-1000-10.jpg);
}
.wrap>div:n子级（3）：之前{
背景图片：url(http://lorempixel.com/output/technics-q-c-1500-1000-3.jpg);
}
.wrap>div:n个子项（2）{
z指数：9；
}
.wrap>div:n个子项（3）{
z指数：8；
}

你的问题是？我猜这是在

Photoshop

中完成的，但我不能肯定这在

CSS

中是不可能的。我觉得接近的投票很有趣。。。这可能不是最好的问题，但它很清楚，也不太宽泛。谢谢。该代码段在safari中不起作用，但在Chrome中看起来很棒。@turkeyhundt-safari，它应该放在标准属性之前--