Как пользоваться: Генератор разделителей секций
- Выберите форму: угол, стрелку, вырез, кривую, выемку, изогнутый угол, волну, зигзаг, фигурные края или ступени.
- Выберите край для среза: снизу, сверху или с обеих сторон (два края с углом дают классическую наклонную полосу).
- Задайте глубину среза. Используйте px или vw, чтобы угол не менялся при росте секции; для волн и зигзагов укажите количество повторов.
- Скопируйте CSS в свою секцию. Необязательное правило подтянет следующую секцию под срез, чтобы не осталось зазора.
Как работают наклонные секции
Секция сохраняет обычный прямоугольный блок; clip-path: polygon() просто скрывает треугольник (или кривую, или зигзаг) вдоль её края. Каждая точка на линии среза использует calc(100% - 80px), поэтому срез всегда глубиной 80 px, и на коротком hero, и на длинной секции, а угол не меняется при росте содержимого.
.section {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding-bottom: calc(80px + 3rem);
}
.section + * { margin-top: -80px; padding-top: calc(80px + 3rem); }Второе правило сдвигает следующую секцию вверх под срез, так что под наклонным зазором виден её фон, а не фон страницы. z-index: 1 держит обрезанную секцию поверх. Кривые, волны и фигурные края нарисованы как полигоны со множеством точек, которые любой современный браузер отображает плавно.
clip-path, skew или SVG
transform: skewY() тоже наклоняет секцию, но искажает и содержимое, поэтому каждому дочернему элементу пришлось бы компенсировать наклон. SVG-разделитель требует дополнительного элемента. clip-path обрезает саму секцию, включая фоны, градиенты и фото, одним правилом. Для многослойных органичных волн используйте Генератор SVG-волн; чтобы мягко растворить край вместо среза, используйте Генератор CSS-масок.
Также ищут как: наклонная секция css, css наклонный блок, диагональная секция css, css разделитель секций, изогнутая секция css, зигзаг border css, clip-path разделитель секций, css разделитель блоков.
Инструменты, которые хорошо сочетаются с Генератор разделителей секций
- Генератор CSS Clip-path — Обрежьте изображения и элементы в любую форму: выберите одну из 15 стартовых фигур — треугольник, шестиугольник, звезда, стрелка, шеврон, речевой пузырь, круг, эллипс, скругленный inset… — и перетащите точки по примеру или своему изображению.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор SVG блобов — Создавайте плавные органические блобы для фоновых изображений главных экранов, аватаров и иллюстраций.
- Генератор CSS-треугольников — Создайте треугольник на чистом CSS для стрелки подсказки, указателя выпадающего меню или облачка речи: выберите одно из 8 направлений, ширину, высоту и цвет, а затем скопируйте либо классический приём с border, либо более простую версию на clip-path.