Generator Pembatas CSS

Pembagi garis sederhana

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

Transisi bagian berbentuk sudut

Trik jalur klip:

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

Sudut kiri bawah ditarik naik sejauh 48px, membentuk kemiringan diagonal. Untuk transisi yang mulus, bagian berikutnya harus dimulai tepat menyentuh permukaan kemiringan tersebut, tanpa ada celah putih.

Untuk garis diagonal yang arahnya berlawanan, pertukarkan sudut bawah mana yang diangkat. Untuk pola notch atau zigzag, tambahkan lebih banyak titik sudut.

Pembagi gelombang SVG

SVG merupakan cara paling bersih untuk membuat kurva organik:

<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" memungkinkan format SVG meregang hingga mencapai lebar kontainer, terlepas dari dimensi sumbernya. margin-top: -1px menghilangkan celah sempit yang sering muncul pada beberapa renderer.

Perpustakaan Pembagi Umum

Potongan teks yang berguna:

Tips

• Kesesuaian jahitan: Latar belakang pembagi (isi SVG atau warna bagian yang berbentuk sudut) harus persis sama dengan latar belakang bagian berikutnya; perbedaan warna sekecil 1px akan mengganggu kesan visualnya.
• Hindari lengkungan yang terlalu curam pada layar sempit. Gelombang yang tampak elegan pada resolusi 1440px dapat terlihat seperti fungsi sinus yang terdistorsi saat resolusi menjadi 360px. Gunakan amplitudo yang lebih kecil di perangkat seluler melalui kueri media atau jalur SVG yang berbeda.
• Jangan menumpuk beberapa pembatas. Satu sambungan pada setiap batas bagian sudah cukup.
• Kinerja: Pembatas berbasis SVG inline hampir tidak berdampak signifikan; sedangkan pembatas berbasis gambar memerlukan permintaan jaringan. Oleh karena itu, SVG inline lebih unggul dalam hal kinerja.