Skewed Borders on 2 Div

Question

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;
}