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