CSS-Trenner-Generator

Einfache Linienseparatoren

/* Subtile horizontale Regel */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

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

Geneigter Abschnittsübergang

Der clip-path Trick:

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

Die untere linke Ecke wird um 48px nach oben gezogen, wodurch eine diagonale Neigung entsteht. Um sauber zu übergehen, sollte der nächste Abschnitt direkt an der Neigung beginnen, keine weiße Lücke.

Für eine Diagonale in die andere Richtung, tausche die untere Ecke, die angehoben wird. Für eine Kerbe oder Zickzack füge mehr Eckpunkte hinzu.

SVG Wellenseparatoren

SVG ist der sauberste Weg, um organische Kurven zu erstellen:

<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; /* schließt jede Subpixel-Lücke */
}

preserveAspectRatio="none" lässt das SVG unabhängig von den Quellabmessungen auf die Containerbreite strecken. margin-top: -1px schließt die Haarlinienlücke, die einige Renderer hinterlassen.

Häufige Separator-Bibliothek

Nützliche Snippets:

Tipps

• Nahtübereinstimmung. Der Hintergrund des Separators (SVG-Füllung oder geneigte Abschnittsfarbe) muss genau mit dem Hintergrund des nächsten Abschnitts übereinstimmen. Ein 1px abweichender Farbton ruiniert den Effekt.
• Vermeide starke Kurven auf schmalen Bildschirmen. Eine Welle, die bei 1440px elegant aussieht, kann bei 360px wie eine gequetschte Sinuskurve wirken. Verwende kleinere Amplituden auf Mobilgeräten über Media Queries oder einen anderen SVG-Pfad.
• Stapel keine mehreren Separatoren. Eine Naht pro Abschnittsgrenze ist genug.
• Leistung. Inline-SVG-Separatoren sind vernachlässigbar; bildbasierte Separatoren kosten eine Netzwerk-Anfrage. Inline-SVG gewinnt.