SVG / Bagian

Shape Divider SVG: Tepi dan Lapisan Bagian

Buat delapan bentuk pembatas bagian SVG dengan amplitudo, frekuensi, tinggi, pembalikan, isian terbalik, dan hingga tiga lapisan. Pratinjau bagian, lalu salin SVG, CSS, dan HTML.

Shape Divider SVG: Tepi dan Lapisan Bagian: Pilih tepi berbentuk gelombang, kurva, kemiringan, segitiga, panah, zigzag, awan, atau gunung; sesuaikan tinggi, amplitudo, dan pengulangannya; balik atau inversikan bentuk; lalu susun hingga tiga lapisan. Pembatas akan menyesuaikan dengan lebar halaman apa pun. Salin SVG, CSS positioning, atau bagian HTML siap pakai. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Pemisah bentuk SVGPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Pratinjau bagian

Ubah suasana.

Tepi berbentuk di antara dua bagian.

Pemisah bagian
Kode SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
Posisi CSS
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
Bagian HTML
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Gunakan warna latar belakang bagian berikutnya untuk membuat tepi yang menyambung. Balik secara vertikal saat memindahkan pemisah bawah ke atas.

Path dan koordinat tertutup

SVG 2 mendefinisikan perintah path closepath dan cubic: https://www.w3.org/TR/SVG2/paths.html . viewBox memetakan koordinat ini ke viewport: https://www.w3.org/TR/SVG2/coords.html

Asal bentuk

Bentuk gelombang menggunakan kurva halus yang sama seperti SVG Wave Generator dan SVG Blob Generator; profil lainnya digambar berdasarkan formula sederhana. Tidak ada karya seni pihak ketiga yang disertakan, jadi Anda bebas menggunakan hasilnya.

Cara menggunakannya

  1. Pilih bentuk, lalu sesuaikan amplitudo, frekuensi, dan tingginya.
  2. Atur lapisan, opasitas, dan warna, lalu pilih tepi bagian serta opsi pembalikan.
  3. Salin SVG, CSS positioning, dan HTML bagian, atau download SVG.

Privasi & batasan

Pembuatan bentuk dan download berjalan sepenuhnya di browser Anda.

Alat terkait

Gelombang SVGblob SVGpola CSS

Pertanyaan umum

Bagaimana cara membuat tepi menyatu dengan bagian lain?

Gunakan warna latar bagian tersebut sebagai warna isian pembatas. CSS menyediakan ruang untuk pembatas dan memosisikannya secara absolut di tepi yang dipilih.

Apa perbedaannya dengan wave tool?

Tool ini menambahkan tujuh bentuk lain, inversi, dan HTML bagian. SVG Wave Generator yang sudah ada menyediakan gelombang acak dan kontrol khusus gelombang tambahan. SVG Blob Generator membuat bentuk organik yang berdiri sendiri.

Apa fungsi invert?

Invert menutup path ke arah atas, bukan ke arah bawah. Posisi tepi pembatas tetap sama. Flip secara vertikal justru mencerminkan seluruh bentuk.

Alat gratis · berjalan di browser anda · tanpa perlu akun