Is there a way to skew two divs without a white line in between, similar to this example:
I have tried using a negative top margin, but it doesn't work well in responsive design.
Here is the code I am using:
...
<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;
}