0

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;
}
Jonathane Andrey
  • 3
  • 2
  • You are not skewing the map in any way so it has a horizontal top and bottom border. Do you want the map to be skewed or for it just to rest under the sloping border of the element above (so some of it will get cut off)? – A Haworth Dec 17 '20 at 07:28

1 Answers1

0

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;
}
Just Alex
  • 457
  • 4
  • 6