Как сделать стили?

Question

[Artem89]

Дано два блока на странице 1 и 2, идут один друг за другом. На месте где они соприкасаются нужно установить 3 картинки (3,4,5) которые будут налазить на друг друга и вместе перекрывать слои 1 и 2 (на слой выше). Блоки 1 и 2 имеют разный бэкграунд цвет и необходимо этот переход закрыть (такой дизайн). При этом картинки 3 и 5 должны выходить за границу браузера (6) и обрезаться (не должен появляться горизонтальный скролл).

Не пойму как прописать стили для картинок 3, 4, 5.
Пробовал абсолютное позиционирование, но тогда на мобильной версии все ломается. И от скрола избавиться не получилось.
Спасибо.

Comments

[Ivan Bogachev]

Пробовал абсолютное позиционирование, но тогда на мобильной версии все ломается. И от скрола избавиться не получилось.

Сделайте демо на codepen или jsfiddle и покажите, что именно у вас там ломается.

Answer 1

[Дмитрий]

Пример

Comments

[Artem89]

Дмитрий, спасибо, все ок. Еще момент justify-content: space-between; оставляет расстояние между картинками 3,4,5, а мне бы чтобы они друг на друга наползали, если возможно.

Answer 2

[Anton Yurzanov]

6й див прописываешь:

overfollow:hidden;
position:relative;

если 1 и 2 по высоте одинаковые, то картинки оборачиваешь в див и позиционируешь по середине через:

top: 50%;
left:50%;
transform:translate(-50%,-50%);

ну , а дальше с картинками через абсолютное позиционирование или отрицательные отступы.

я бы пробовал как то так.