Перекошенные границы на 2 делениях

Я пытаюсь исказить два div, похожие на это:

Желаемый результат

Однако между ними всегда есть белая линия. Я тестировал с отрицательным верхним полем, но он не работает в адаптивном режиме.

Мой результат

с этим кодом:

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

html css css-shapes skew
person Jonathane Andrey    schedule 17.12.2020    source источник
comment
Вы никоим образом не искажаете карту, поэтому у нее есть горизонтальная верхняя и нижняя границы. Вы хотите, чтобы карта была перекошена или чтобы она просто лежала под наклонной границей элемента выше (чтобы часть ее была обрезана)?   -  person A Haworth    schedule 17.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

Все, что вам нужно сделать, это добавить transform: translateY(10%); и z-index: 999; в ваш класс .img-box, и это должно сработать, дайте мне знать, если это не так!

Кстати, 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;
}
person Just Alex    schedule 17.12.2020
comment
Большое спасибо! Ничего страшного ????????Я не большой спец по этим трансформациям ???? - person Jonathane Andrey; 17.12.2020
comment
Пожалуйста ! :) Дай мне знать если тебе нужно что-нибудь еще. - person Just Alex; 17.12.2020