Как сверстать такой стык блоков?

Question

[0leg5ergeev]

да, подобный вопрос задавали - Как сверстать такой стык блоков? , но мой случай несколько иной.
Как сверстать стык блоков как на скрине?


Верхний - фон задаётся cover и высотой 100%
но! Нижний имеет белый фон.

Пока копаю в css, но решения нет.

Answer 1

[Андрей Федоров]

Ну как же нет?
htmlbook.ru/css/border-image

Делаете png, у которого нижняя часть белая, верхняя - прозрачная...

Answer 2

[Капитан Какао]

Я бы сделал так
Блоку у которого должна быть волнистая часть, задал бы стили after, и сделал бы ему фоновую картинку зацикленную волну.

Comments

[0leg5ergeev]

как жаль, что не знаю псевдо-классы, спасибо

[keslo]

0leg5ergeev: хороший повод освоить :-)

[0leg5ergeev]

keslo: давно пора :)

Answer 3

[Андрей]

Способов несколько.
Вырезаете кусочек волны с нижней частью белой и прозрачным верхом
Во всех слкчаюх делаете background с вашей верхней картинкой.
И дальше либо делаете border-image, как предложили выше.
Либо делаете у дочернего блока background картинку с волной и прижимаете её к низу:

position: absolute;
bottom: 0;
height: 10px;

Либо можно извратится и следующий блок (нижний) поднять вверх с z-index выше пверхнего:

z-index: 2;
margin-top: -10px;

Либо можно у нижнего блока сделать дочерний элемент и абсолютно спозиционировав его поднять вверх:

position: absolute;
top: -10px;
height: 10px;

Есть еще куча вариантов.
Я бы сделал по 2му варианту с дочерним блоком и position: absolute; bottom: 0; ...
Удачной реализации.