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

Question

我想达到这个结果:这是我的 atm:http://mijnwebsitebestellen.be/index.php

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

感谢任何类型的提示或示例。

Answer 1

您可以使用纯 CSS 实现相同的结果。

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

等等:

.container {
  height: 300px;
  width: 400px;
  background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(/image/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 并为其指定适当的宽度即可。