Разделители для разноцветных секций

Все примеры в данной теме представлены в виде 3-х секций, центральная из которых — темная.

Между этими секциями установлены разделители, которые украшают переход между ними .

Разделитель с шестиугольниками

Оба этих сепаратора имеют цветные и прозрачные шестиугольники и по своей сути одинаковые, но в первой секции они синии, а во второй - белые.

Для удобства SVG-спрайты внесены в CSS код. Если нужно подключить их другим образом - скачайте исходник.

Размер и соотв. высота шестиугольников регулируется свойством background-size по коориднате Y.

Светлая секция с темным нижним разделителем
Темная секция со светлым нижним разделителем
Светлая секция без разделителя

Разделитель ромбиком

Два разделителя в PNG формате с размерами 1920 х 75 px. Для удобства сконверти́рованы в base64 формат. Оригиналы можно скачать по ссылкам: верхний разделитель и нижний разделитель

Вместо цветного фона в темной секции можно использовать графический. Пример такого кода во вкладке CSS с фото

Светлая секция
Темная секция
Светлая секция

Разделитель стрелой

Вариант похожий на предыдущий, но выполненный средствами SVG.

Изменяя высоту height="60" у SVG, можно менять угол наклона темной стрелы.

Светлая секция
Темная секция
Светлая секция

Разделитель волнами

В данном варианте SVG-спрайты/сепараторы находятся непосредственно в HTML коде.

Похожий вариант, но с анимацией можно посмотреть в теме: Анимированный разделитель для секций на CSS

Светлая секция
Темная секция
Светлая секция

Разделитель волной

Еще один пример разделия секций волной.

Как и в предыдущем варианте, SVG-спрайты/сепараторы находятся в HTML коде.

Светлая секция
Темная секция
Светлая секция

Наклонный разделитель

Два простых наклонных разделителя на SVG

Светлая секция
Темная секция
Светлая секция

Разделитель со стрелкой

Стрелку в данном примере и переходящий на нее фон можно использовать для логотипа или другого значка.

Светлая секция
Темная секция
Светлая секция

Разделитель волнистой линией

Высоту и ширину разделителей можно настроить параметрами width и height в SVG

Светлая секция
Темная секция
Светлая секция

Ломанный разделитель

Высоту и ширину разделителей можно настроить параметрами width и height в SVG

Светлая секция
Темная секция
Светлая секция

Разделитель горизонтальной ломаной линией

Высоту и ширину разделителей можно настроить параметрами width и height в SVG

Светлая секция
Темная секция
Светлая секция

Полукруглый разделитель

Задать радиус окружности можно изменив параметры width и height у SVG спрайта

Светлая секция
Темная секция
Светлая секция

Зигзагообразный разделитель

Простой разделитель на SVG.

Очень похожий вариант можно посмотреть в теме: Зигзагообразный бордюр на CSS

Светлая секция
Темная секция
Светлая секция

В основном в теме присутствуют решения, найденные на codepen.io
у пользователей XYZZY estudio web и Ema

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Миша:

    Огромное спасибо! Очень классные элементы!

    Ответить