Генератор CSS-разделителей

Простые линейные разделители

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Угловой переход между секциями

Приём с clip-path:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

Левый нижний угол поднят на 48px, образуя диагональный наклон. Чтобы переход был чистым, следующая секция должна начинаться вплотную к наклону, без белого зазора.

Чтобы диагональ шла в другую сторону, поменяйте, какой нижний угол приподнимается. Для выемки или зигзага добавьте больше вершин.

Волнистые разделители на SVG

SVG, самый чистый способ создавать органичные кривые:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none" позволяет SVG растягиваться до ширины контейнера независимо от исходных размеров. margin-top: -1px закрывает тонкий, как волосок, зазор, который оставляют некоторые движки отрисовки.

Библиотека частых разделителей

Полезные фрагменты:

Советы

• Совпадение шва. Фон разделителя (заливка SVG или цвет угловой секции) должен точно совпадать с фоном следующей секции. Отличие в оттенке даже на 1px портит эффект.
• Избегайте крутых кривых на узких экранах. Волна, которая выглядит элегантно при 1440px, при 360px может превратиться в сплющенную синусоиду. На мобильных уменьшайте амплитуду через медиазапросы или используйте другой SVG-путь.
• Не накладывайте несколько разделителей друг на друга. На одну границу секций достаточно одного шва.
• Производительность. Встроенные SVG-разделители почти ничего не стоят; разделители на основе изображений требуют сетевого запроса. Встроенный SVG выигрывает.