Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Pembagi Bagian CSS

Buat pembagi tepi bagian dekoratif — miring, kurva, segitiga, panah/pemisah, gulungan halaman buku, atau awan bergelombang — dari bentuk dan warna pilihan Anda. Salin SVG, cuplikan latar belakang CSS, atau blok HTML siap tempel. Berjalan sepenuhnya di browser Anda.

Input

Seberapa jauh tepi diagonal turun, sebagai persentase dari ketinggian.

Dimensi

Transformasi

Isi

Latar belakang

Output

Kode SVG
Pratinjau

Pembagi Anda akan ditampilkan di sini.

Latar belakang CSS
Cuplikan HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "shapeType": "slant",
    "slantDepth": "50",
    "width": "1200",
    "height": "200",
    "fillColor": "#464aff",
    "fillOpacity": "100",
    "bgColor": "#f5f5f5"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-section-divider-generator` tool (CSS Section Divider Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-section-divider-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Pembagi Bagian CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Pembuat Pembagi Bagian CSS membangun tepi bagian berbentuk yang Anda lihat memecah bagian pahlawan, footer, dan blok konten di halaman landing modern — miring, kurva tunggal, segitiga, panah/takik pemisah, sudut halaman buku yang melengkung, atau deretan awan bergelombang. Ini memberikan hasil kepada Anda tiga cara: SVG mentah, cuplikan CSS background-image, dan blok HTML siap tempel. Setiap bentuk adalah geometri vektor nyata, jadi tetap tajam di ukuran apa pun.

Cara menggunakannya

  1. Pilih bentuk — miring, kurva, segitiga/baji, panah/pemisah, gulungan halaman buku, atau awan.
  2. Sesuaikan kontrol khusus bentuk itu (kedalaman miring, kedalaman kurva, posisi dan tinggi puncak, kedalaman takik, ukuran gulungan, atau jumlah tonjolan dan tinggi).
  3. Atur lebar dan tinggi kanvas.
  4. Balik bentuk secara vertikal (untuk menggantung dari bagian atas bagian alih-alih duduk di bawah) atau horizontal (untuk mencerminkan miring, puncak, dan gulungan halaman buku ke sisi lain).
  5. Pilih warna isi dan opasitas, serta warna latar belakang. Salin output mana pun yang Anda butuhkan — pratinjau diperbarui saat Anda bekerja.

Tiga output

  • Kode SVG — <svg> mandiri yang dapat Anda jatuhkan langsung ke markup Anda atau simpan sebagai file .svg. Warna latar belakang dipanggang sebagai <rect>, jadi file terlihat identik di mana pun Anda membukanya.
  • Latar belakang CSS — bentuk yang sama dikodekan URL ke dalam aturan background-image: url("data:image/svg+xml,…"), siap untuk ditambahkan ke elemen apa pun sebagai pembagi dekoratif.
  • Cuplikan HTML — pembungkus <div> dengan SVG inline, untuk ditempel ke halaman tanpa menyentuh stylesheet Anda.

Bagaimana cara saya menempatkan pembagi di bagian atas bagian alih-alih bagian bawah?

Aktifkan Balik vertikal. Setiap bentuk digambar untuk duduk di tepi bawah kotak secara default; membalik mencerminkan area yang diisi sehingga bentuk yang sama menggantung dari tepi atas sebagai gantinya — tidak ada pengaturan "posisi" terpisah yang diperlukan.

Apakah bentuk-bentuk ini akan diskalakan tanpa blur?

Ya. Semuanya adalah data jalur vektor dengan preserveAspectRatio="none", jadi bentuk meregangkan untuk mengisi lebar apa pun yang Anda tempatkan di — dari ponsel hingga monitor ultra lebar — tanpa kehilangan kualitas.

Bagaimana jika saya menginginkan pembagi bergelombang?

Alat ini mencakup keluarga bentuk lurus dan melengkung. Untuk pembagi yang bergelombang, berombang — sinus, zigzag, bukit bulat, gelombang berlapis, atau blob organik — gunakan Pembuat Gelombang SVG, alat saudaranya yang dibangun pada kontrak output SVG/CSS/HTML yang sama.

Privasi

Generator berjalan sepenuhnya di browser Anda. Warna, dimensi, dan setiap pengaturan lainnya tetap di perangkat Anda — tidak ada yang diunggah, dan tidak ada bentuk yang pernah dikirim ke server.

section divider generatorwave divider alternativeslant divider csspage curl svgcloud divider svghero shape dividersvg background shapefooter divider css

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan