Pembatas bagian hero
Gratis, tanpa daftar, berjalan di peramban Anda.
Hal paling umum yang membuat orang datang ke sini: sebuah kurva antara hero berwarna dan apa pun di bawahnya, supaya kedua bagian bertemu pada sebuah bentuk alih-alih garis lurus.
Resepnya
| Bentuk | Gelombang halus |
|---|---|
| Ekspor sebagai | SVG |
| Ukuran | 322 B |
Langkah demi langkah
- Buka generatornya dan pilih Gelombang halus di baris prasetel.
- Setel warna isian ke warna latar bagian *di bawah* hero, bukan warna heronya.
- Salin SVG dan tempel sebagai elemen terakhir di dalam hero Anda.
- Beri `display:block` dan `width:100%` supaya ia membentang penuh tanpa menyisakan celah di bawahnya.
Yang akan Anda salin
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-360 137.58C-300 144.27,-120 166.02,0 177.73C120 189.44,240 207.5,360 207.83C480 208.15,600 190.33,720 179.69C840 169.05,960 144.62,1080 143.98C1200 143.34,1380 170.55,1440 175.86L1440 320L-360 320Z" fill="#4f46e5"/></svg>Lebih rinci
Warna adalah langkah yang sering keliru. Pembatasnya adalah tepi atas bagian *berikutnya* yang menjulur naik ke hero, jadi ia harus berwarna bagian itu — setel ke warna hero dan Anda dapat bentuk yang tak terlihat di atas latarnya sendiri. Kalau ada garis setebal satu piksel di bawah bentuknya, itu SVG yang duduk di garis dasar teksnya: `display:block` menghilangkannya.
Pertanyaan
Bentuk mana yang sebaiknya jadi titik awal untuk Pembatas bagian hero?
Gelombang halus, diekspor sebagai SVG. Pasangan itulah yang menjadi dasar halaman ini, dan pratinjau di atas adalah bentuk itu persis — tetapi ia titik awal, bukan aturan. Semua penggeser tetap aktif begitu Anda membukanya.
Berapa banyak tambahannya ke halaman?
Sekitar 322 bita untuk kombinasi ini. Itu lebih kecil daripada satu ikon dan sama sekali tidak butuh permintaan jaringan, karena bentuknya adalah markah, bukan berkas gambar.
Apakah akan jalan di ponsel?
Ya. Pembatas gelombang disetel untuk melar mengikuti wadahnya alih-alih mempertahankan rasio aspek, dan itulah yang membuat satu bentuk bisa membentang di lebar layar mana pun tanpa bilah hitam. Blob mempertahankan proporsinya, karena blob yang dimelarkan hanyalah elips.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.