Generatore di Divisori CSS

Divisori di linea semplici

/* Regola orizzontale sottile */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* Con testo al centro */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Transizione angolata della sezione

Il trucco del clip-path:

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

L’angolo in basso a sinistra è sollevato di 48px, creando un’inclinazione diagonale. Per una transizione pulita, la sezione successiva dovrebbe iniziare a filo con l’inclinazione, senza spazi bianchi.

Per una diagonale che va dall’altra parte, scambia quale angolo inferiore è sollevato. Per un intaglio o zigzag, aggiungi più vertici.

Divisori a onda SVG

SVG è il modo più pulito per fare curve organiche:

<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; /* chiudi eventuali spazi subpixel */
}

preserveAspectRatio="none" consente all’SVG di allungarsi alla larghezza del contenitore indipendentemente dalle dimensioni di origine. margin-top: -1px chiude il sottile spazio che alcuni renderer lasciano.

Libreria di divisori comuni

Snippet utili:

Suggerimenti

• Corrispondenza delle giunture. Lo sfondo del divisore (riempimento SVG o colore della sezione angolata) deve corrispondere esattamente allo sfondo della sezione successiva. Una sfumatura di 1px rovina l’effetto.
• Evitare curve pesanti su schermi stretti. Un’onda che appare elegante a 1440px può sembrare una sinusoide schiacciata a 360px. Usa un’ampiezza più piccola su mobile tramite media queries, o un percorso SVG diverso.
• Non sovrapporre più divisori. Una giuntura per confine di sezione è sufficiente.
• Prestazioni. I divisori SVG inline sono trascurabili; i divisori basati su immagini costano una richiesta di rete. Gli SVG inline vincono.