CSS-avdelargenerator

Enkla linjeavdelare

/* Subtil horisontell linje */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

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

Vinklad sektionsövergång

clip-path-tricket:

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

Det nedre vänstra hörnet dras upp 48px, vilket skapar en diagonal lutning. För att gå över rent ska nästa sektion börja kant i kant mot lutningen, inget vitt glapp.

För en diagonal åt andra hållet, byt vilket nedre hörn som lyfts. För en skåra eller sicksack, lägg till fler hörn.

SVG-vågavdelare

SVG är det renaste sättet att göra organiska kurvor:

<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; /* stäng eventuellt subpixel-glapp */
}

preserveAspectRatio="none" låter SVG:en sträckas till behållarens bredd oavsett källdimensioner. margin-top: -1px stänger det hårfina glapp som vissa renderare lämnar.

Vanligt avdelarbibliotek

Användbara snippets:

Tips

• Skarvmatchning. Avdelarens bakgrund (SVG-fyllning eller vinklad sektionsfärg) måste matcha nästa sektions bakgrund exakt. En 1px fel nyans förstör effekten.
• Undvik tunga kurvor på smala skärmar. En våg som ser elegant ut vid 1440px kan se ut som en hopklämd sinus vid 360px. Använd mindre amplitud på mobil via media queries, eller en annan SVG-path.
• Stapla inte flera avdelare. En skarv per sektionsgräns räcker.
• Prestanda. Inline-SVG-avdelare är försumbara; bildbaserade avdelare kostar en nätverksförfrågan. Inline-SVG vinner.