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 class 中添加 transform: translateY(10%); 和 z-index: 999;，它应该会起作用，如果不起作用请告诉我！

顺便说一下，z-index 严格来说不一定是 999，我放了最高的数字，以防万一以后你决定在代码中添加更多的东西时无法克服它，你可以放 z-index: 1;，它也可以工作，或者任何大于 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;
}

2 Div 上的边框倾斜

Skewed Borders on 2 Div

html

css

skew

css-shapes