在角落重叠的Div背景

Question

有几个单独的背景图像，从上到下显示。是否可以使它们略微重叠并在右下角夹住一个透明的三角形区域，露出下面的图像？

这可以用CSS吗？

这是期望的外观：

Answer 1

是的，CSS非常有用。

这是一种使用旋转div和:before伪元素的技术。这看起来像一个很长的解释，但是一旦你开始探索，基本的原则就非常直接。

兼容性： IE9 + and all modern browsers - IE9中的transform属性需要-ms-前缀，Safari需要-webkit-前缀。它们应该放在之前未加前缀的属性。

包装器

包装器用于剪切每个div的倾斜角。

• 提供合适的最大和最小宽度
• 使用overflow: hidden
剪辑其子女

div

div用于通过剪切其子项的右下角来创建倾斜。

• 使用transform: rotate()
旋转
• 使用overflow: hidden
剪辑其子女
• 使用width: 200%将宽度向外吹，以便角落被包装器剪裁
• 以负余量
向上移动每个div（第一个div除外）
• 使用z-index更改z顺序，以便每个div与之前的div重叠

:before伪元素

:before提供实际的背景图片，没有任何额外的标记。

• 以相同的度数反对div父母的轮换
• 提供背景图片
• 根据需要使用transform-origin
进行切换

直边由​​图像的下边缘提供，并且角由父母切除。图像必须非常大才能与其父图像的宽度重叠。

完整示例

Example with prefixes.

＆＃13;

＆＃13;

.wrap {
  margin: 0 auto;
  max-width: 1000px;
  min-width: 660px;
  overflow: hidden;
  background: #EEE;
}
.wrap > div {
  transform: rotate(-15deg);
  height: 700px;
  width: 200%;
  overflow: hidden;
  transform-origin: 0 90%;
  position: relative;
  z-index: 10;
}
.wrap > div:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/output/food-q-c-1500-1000-2.jpg) no-repeat;
  transform: rotate(15deg);
  position: absolute;
  transform-origin: 30% 0;
}
.wrap > div:nth-child(n+2) {
  margin-top: -140px;
}
.wrap > div:nth-child(2):before {
  background-image: url(http://lorempixel.com/output/people-q-c-1500-1000-10.jpg);
}
.wrap > div:nth-child(3):before {
  background-image: url(http://lorempixel.com/output/technics-q-c-1500-1000-3.jpg);
}
.wrap > div:nth-child(2) {
  z-index: 9;
}
.wrap > div:nth-child(3) {
  z-index: 8;
}

＆＃13;

<div class="wrap">
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;