HelpSophie
@HelpSophie

Как сделать реально адаптивную волну между блоками (svg, clip-path)?

Есть 2 блока, граница между ними в форме волны.
https://jsfiddle.net/031xL8re/
Если задать для clipPath clipPathUnits="objectBoundingBox" и пересчитать все размеры в vw, то вроде всё и не плохо.

Но если вспомнить про переполнение и добавить, например, в 2 раза больше текста в первый блок, то всё рассыпается и появляется белое поле между блоками.
Как переделать, чтобы переполнение не ломало затею?
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
RAX7
@RAX7
Лучше фоновое изображение засунуть в svg и сделать маску.
Либо так:
(с пропорциональным увеличением)

либо:
(с фиксированной высотой)

Также с помощью медиа-запросов можно совместить оба эти варианта
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы