CSS-scheidingslijn-generator

Eenvoudige lijnscheidingen

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

Schuine sectie-overgang

De clip-path-truc:

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

De linkeronderhoek wordt 48px omhoog getrokken, waardoor een diagonale helling ontstaat. Voor een nette overgang moet de volgende sectie strak tegen deze helling beginnen, zonder witte ruimte.

Voor een diagonaal die de andere kant op loopt, wissel je om welke onderhoek omhoog wordt getrokken. Voor een inkeping of een zigzag voeg je meer hoekpunten toe.

Golvende SVG-scheidingen

SVG is de schoonste manier om organische curven te maken:

<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" zorgt ervoor dat de SVG zich uitstrekt tot de breedte van het container, onafhankelijk van de oorspronkelijke afmetingen. margin-top: -1px dicht de haarfijne spleet die sommige renderers achterlaten.

Bibliotheek met veelgebruikte scheidingen

Handige fragmenten:

Tips

• Naadje laten kloppen. De achtergrond van de scheiding (SVG-vulling of kleur van de schuine sectie) moet exact overeenkomen met de achtergrond van de volgende sectie. Een afwijking van 1px in kleur verpest het effect al.
• Vermijd zware curven op smalle schermen. Een golf die er bij 1440px elegant uitziet, kan bij 360px op een platgedrukte sinus lijken. Gebruik op mobiel een kleinere amplitude via media queries, of een ander SVG-pad.
• Stapel niet meerdere scheidingen op elkaar. Eén naad per sectiegrens is genoeg.
• Prestaties. Inline SVG-scheidingen zijn verwaarloosbaar; scheidingen op basis van afbeeldingen kosten een netwerkverzoek. Inline SVG wint.