Задать вопрос
@alvik48
Frontend & Node.js developer

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

26f122c5d16626bed9064a31a361984d73e3b2b8

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

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

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

UPD: Меня ткнули носом и показали, что волны все серого цвета. Тогда все решается элементарно. Но все равно интересно, если бы на самих волнах продолжался паттерн нижнего блока, были бы безкостыльные пути решения вопроса? Пока что вопрос не закрываю, но уже из спортивного интереса.
  • Вопрос задан
  • 3085 просмотров
Подписаться 9 Оценить 2 комментария
Ответ пользователя Trow_eu К ответам на вопрос (3)
Trow_eu
@Trow_eu
я бы сделал нижний чуть заходящий под верхний, с прямоугольным фоном, верхний - пнг с прозрачной волной и отступом для контента. либо джпег до волны и волну пнг, чтобы уменьшить размер.
можно и разной ширины, например нижняя текстура может быть фоном всей страницы, тогда задвигать под верхний с z-index ничего не надо.
Ответ написан