Softonic

Generator Pembatas SVG

Langkah 1 / 3
Berikutnya

Halaman pendaratan kini hampir tidak lagi memiliki sambungan horizontal yang jelas antar bagian berwarna; semuanya menyatu melalui bentuk gelombang melengkung, kemiringan miring, atau deretan segitiga. Semua elemen ini merupakan bentuk SVG sederhana: sebuah bounding box dengan ukuran sesuai lebar halaman, poligon atau lintasan yang diisi dengan warna latar belakang bagian berikutnya, dan terpasang di bagian bawah bagian sebelumnya. Generator ini dapat membuat bentuk tersebut dalam lima gaya (gelombang, kurva, kemiringan, segitiga, tangga) dengan lebar, tinggi, warna, serta efek pembalikan vertikal apa pun yang dibutuhkan.

Cara Membuat Pembagi Bagian

  1. 1

    Pilih gaya

    Gelombang (kurva S), lengkung (busur tunggal), kemiringan (sejajar diagonal), segitiga (zigzag), tangga (berjenjang).

  2. 2

    Atur lebar dan tinggi

    Lebar = lebar halaman (1200–1920). Tinggi = tinggi pembatas (umumnya 50–200 piksel).

  3. 3

    Pilih jenis pengisian

    Pilih warna latar bagian berikutnya agar pembatas dapat menyatu dengan mulus dengannya.

  4. 4

    Membalikkan secara vertikal

    Atur flipY untuk membalikkan bentuknya jika Anda membutuhkannya menunjuk ke atas, bukan ke bawah.

  5. 5

    Salin SVG

    Pasang di bagian bawah bagian keluar atau di bagian atas bagian masuk. Gunakan `preserveAspectRatio="none"` (sudah termasuk) agar bentuknya menyesuaikan diri dengan tampilan layar.

Lima gaya dan kapan harus digunakan

Gaya Suasana Cocok untuk
Gelombang Lembut, ramah Hero → ulasan pengguna, palet warna pastel
Kurva Bersih dan elegan Grid fitur → Tautan Aksi (CTA), desain minimalis
Kemiringan Modern dan berani Tema hero gelap → konten cerah, kontras tinggi
Segitiga Tajam, teknis Alat pengembang, dashboard SaaS
Tangga Berstruktur, bergaya retro Tabel harga, tata letak editorial

Menempatkan pembatas dalam penandaan Anda

Penempatan tipikal di bagian bawah suatu segmen:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

Mengapa preserveAspectRatio="none"

Secara default, format SVG mengalami penskalaan secara seragam. Untuk pembagi yang menyeberangi seluruh area tampilan, bentuknya perlu meregang secara horizontal, secara menyeluruh dari satu ujung ke ujung, bukan hanya gelombang kecil yang terpusat di tengah halaman. preserveAspectRatio="none" memerintahkan renderer untuk memutarbalikkan rasio aspek secara bebas, yang tepat sesuai kebutuhan pembagi tersebut.

Aksesibilitas dan SEO

  • Tandai kemasan aria-hidden="true" agar alat pembaca layar tidak menampilkan bentuk dekoratifnya.
  • Pertahankan ukuran file SVG di bawah beberapa kilobyt; SVG berukuran besar yang ditampilkan secara inline dapat memperlambat proses pemrosesan DOM. Ukuran hasil keluaran di sini jauh di bawah 1 KB.
  • Hindari penggunaan gambar raster sebagai pembatas; gambar tersebut akan tampak berbintik pada monitor ultra-lebar dan layar Retina.

Pertanyaan yang Sering Diajukan

Tidak secara ketat. Atribut width pada SVG menentukan ukuran intrinsiknya, sedangkan dengan preserveAspectRatio="none" dan CSS width: 100%, bentuk tersebut akan mengisi seluruh kontainer. Menetapkan lebar ke angka bulat seperti 1200 memudahkan pembacaan angka-angka dalam lintasan.

Itulah umumnya baseline inline bawaan elemen SVG. Tambahkan display: block (atau vertical-align: bottom) ke dalam SVG untuk menghilangkan celah tersebut.

Ya. Generasikan dua atau tiga pembagi dengan warna dan tingkat keabuan yang berbeda, lalu tumpukkan mereka. Aplikasikan offset beberapa piksel menggunakan margin-top atau CSS transform untuk menciptakan efek paralaks.

SVG yang dihasilkan bersifat statis. Untuk gelombang animasi, terapkan frame kunci CSS transform: translateX() pada elemen penutupnya, atau gunakan dua salinan secara berdampingan lalu geser posisinya.

Tidak ada data yang disimpan; file SVG selalu dirender ulang secara baru berdasarkan nilai-nilai formulir saat ini.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain