Как пользоваться: Изогнутый разделитель секций
- Предпросмотр начинается с выпуклого изгиба на нижнем крае; выберите Scoop, чтобы получить обратный вариант.
- Попробуйте Curved angle, Wave или Scallops и задайте количество повторов.
- Укажите глубину изгиба и край (нижний, верхний или оба).
- Скопируйте CSS.
Изгибы с помощью clip-path
Изгиб задается функцией polygon() с десятками точек, которые повторяют дугу. Каждая точка задана через calc(100% - …), поэтому глубина остается фиксированной в px или vw. Для простого эллиптического нижнего края можно использовать border-radius: 0 0 50% 50% / 0 0 80px 80px, но тогда скругляются и углы блока с содержимым; вариант с clip-path обрезает только край.
Для многослойных волн посмотрите генератор SVG-волн, а для углов и зигзагов — генератор разделителей секций.
Также ищут как: изогнутая секция css, css изогнутый нижний край, скругленная hero секция css, css разделитель с изгибом, скругление низа секции css, css дуга секции, clip-path изгиб секции.
Инструменты, которые хорошо сочетаются с Изогнутый разделитель секций
- Наклонная секция CSS — Создавайте наклонные, скошенные или диагональные секции — популярный вид лендингов — одним правилом clip-path.
- Зигзаг-граница CSS — Сделайте зигзагообразный, пилообразный, фестончатый или ступенчатый край для секций, карточек, купонов и чеков.
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
Часто задаваемые вопросы
Как сделать изогнутый нижний край у секции?
Выберите Curve и скопируйте CSS: многоугольник clip-path повторяет дугу по нижнему краю. Либо border-radius: 0 0 50% 50% / 0 0 80px 80px даст простой эллиптический нижний край.
Может ли изгиб быть направлен внутрь?
Да: Scoop загибает край внутрь, поэтому следующая секция как бы выступает вверх в эту.
Достаточно ли плавен изгиб из многоугольника?
Да. Изгиб строится из десятков точек, и при обычных размерах он выглядит так же, как SVG-кривая.
Можно ли установить Изогнутый разделитель секций как веб-приложение и пользоваться им офлайн?
Да. Изогнутый разделитель секций — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.