Skewed Borders on 2 Div [duplicate] - html

Question

This question already has an answer here:
symetric div with background image without clip-path
(1 answer)
Closed 2 years ago.
I'm trying to skew two div, similar to this:
Desired result
However, there is always a white line in between. I tested with a negative top margin but it doesn't work in responsive.
My result
with this code:
...
<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

All you gotta do is add transform: translateY(10%); and z-index: 999; in your .img-box class, and it should work, let me know if it doesn't !
By the way, z-index doesn't strictly gotta be 999, I put the highest number just in case that something wont get over it later on if you decide to add more things to your code, you can put z-index: 1;, it will also work, or any number higher then 0 really :)
Just replace your css with this one :
.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;
}