2 div上的倾斜边框[重复]

Question

我正在尝试倾斜两个 div，类似于：

Desired result

但是，两者之间总是有一条白线。我测试了一个负的上边距，但它在响应中不起作用。

My result

使用此代码：

...
<div class="img-box"></div>
<div class="map-box"></div>
<footer>...</footer>
...

.img-box {
    background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 100vh;
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

.map-box {
    background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    position: relative;
    height: 600px;
    display-block;
}

footer{
    height:100px;
    background-color: #4D4E4C;
}

Answer 1

您所要做的就是在您的 .img-box 课程中添加 transform: translateY(10%); 和 z-index: 999;，它应该可以工作，如果不行，请告诉我！

顺便说一下，z-index 严格来说不一定是 999，我放了最高的数字以防万一以后如果你决定在你的代码中添加更多的东西，你可以放 @987654325 @，它也可以工作，或者任何高于 0 的数字真的:)

只需将您的css 替换为这个即可：

.img-box {
  background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 100vh;
  transform: translateY(10%);
  z-index: 999;
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

.map-box {
  background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  position: relative;
  height: 600px;
  display-block;
}

footer{
  height:100px;
  background-color: #4D4E4C;
}