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

Question

[Aleksandr Kriuchkov]

Сложность: блок снизу имеет фон-паттерн, блок сверху в качестве фона использует картинку.
На стыке, как можно видеть, имеется повторяющийся паттерн перехода.

Копаю в сторону css masks & css shapes, но пока безрезультатно. Если кто сможет подсказать, как такие штуки наиболее оптимально делаются, буду благодарен.

--------------

UPD: Меня ткнули носом и показали, что волны все серого цвета. Тогда все решается элементарно. Но все равно интересно, если бы на самих волнах продолжался паттерн нижнего блока, были бы безкостыльные пути решения вопроса? Пока что вопрос не закрываю, но уже из спортивного интереса.

Comments

[Ольга Стогова]

только снизу?

[Aleksandr Kriuchkov]

Допустим, только снизу (ну т.е. в нижнем блоке будет какая-то маска, а верхний блок просто будет под него подлазить).

Answer 1

[Ольга Стогова]

блок с картинкой

block1{
position: relative;
}

блок с волной

block2{
position: absolute;
bottom: 0;
}

или ставьте оба relative, блок с волной сразу за блоком с картинкой, распределите z-index, у блока с волной отрицательный margin-top на его высоту

ширина у блоков, естественно одинаковая

ну то есть либо один в другом, либо друг на дружку наползают, можно еще два бекграунда сделать — картинку и волну

Comments

[Aleksandr Kriuchkov]

Главная проблема тут в том, что если делать отдельный блок с волной, то он не состыкуется с фоном нижнего блока (заметили, там паттерн с квадратами?), а сами блоки по горизонтали не фиксированы.

[Ольга Стогова]

если даже с позицией center top не совпадает, то
сделайте тогда нижний блок не только на высоту волны, но и полностью весь контент с квадратами, а бекграунд высокая такая png во всю длину блока и ширину одной волны

Answer 2

[iDennis]

absolute? не?

Answer 3

[Trow_eu]

я бы сделал нижний чуть заходящий под верхний, с прямоугольным фоном, верхний - пнг с прозрачной волной и отступом для контента. либо джпег до волны и волну пнг, чтобы уменьшить размер.
можно и разной ширины, например нижняя текстура может быть фоном всей страницы, тогда задвигать под верхний с z-index ничего не надо.

Comments

[Maksim Zverev]

Самое верное решение.

[Trow_eu]

это приятно слышать, учитывая, что я еще в нюбах ))