重叠多边形，z-index和之前/之后

Question

我想达到这个结果： 这就是我的主题：http://mijnwebsitebestellen.be/index.php

所以我目前正在使用SVG元素来分割图像。您可以在浏览器中检查代码。由于z-index问题，我无法得到正确的结果。

任何提示或示例都表示赞赏。

Answer 1

使用纯CSS可以获得相同的结果。

• 使用容器元素作为背景颜色和图像
• 使用带有白色右边框的伪元素::after来模仿右边缘
• 使用同一个班级.tile的某些div来模仿transform: skewX(-10deg);的条纹并让它们float: right;

Etvoilà：

.container {
  height: 300px;
  width: 400px;
  background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/e11Va.jpg);
  background-size: cover;
  color: white;
  position: relative;
  padding-right: 26px;
}
.container::after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
  border: none;
  border-left: none;
  border-right: 52px solid white;
  border-top: 300px solid transparent;
  border-bottom: none;
}
.tile {
  width: 30px;
  height: inherit;
  background: rgba(0, 0, 0, 0.6);
  border-left: 5px solid white;
  transform: skewX(-10deg);
  float: right;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

当然，您可以向容器添加内容。只需在容器内使用另一个div，并给它适当的宽度。