Generator separatorów CSS

Proste separatory liniowe

/* 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;
}

Ukośne przejście między sekcjami

Sztuczka z clip-path:

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

Lewy dolny róg jest podciągnięty o 48px, tworząc ukośne nachylenie. Aby przejście było czyste, kolejna sekcja powinna zaczynać się tuż przy nachyleniu, bez białej przerwy.

Aby przekątna szła w drugą stronę, zamień, który dolny róg jest uniesiony. Dla wcięcia lub zygzaka dodaj więcej wierzchołków.

Separatory falowe SVG

SVG to najczystszy sposób na organiczne krzywe:

<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" pozwala SVG rozciągnąć się do szerokości kontenera niezależnie od wymiarów źródłowych. margin-top: -1px zamyka cienką szczelinę, jaką zostawiają niektóre silniki renderujące.

Biblioteka typowych separatorów

Przydatne fragmenty:

Wskazówki

• Dopasowanie szwu. Tło separatora (wypełnienie SVG lub kolor ukośnej sekcji) musi dokładnie odpowiadać tłu kolejnej sekcji. Odcień różniący się o 1px psuje efekt.
• Unikaj mocnych krzywych na wąskich ekranach. Fala, która wygląda elegancko przy 1440px, może przypominać spłaszczoną sinusoidę przy 360px. Na urządzeniach mobilnych użyj mniejszej amplitudy przez media queries lub innej ścieżki SVG.
• Nie nakładaj wielu separatorów. Jeden szew na granicę sekcji wystarczy.
• Wydajność. Wbudowane separatory SVG są znikome; separatory oparte na obrazach kosztują żądanie sieciowe. Wbudowany SVG wygrywa.