Apa itu Pembuat CSS Clip Path?

Pembuat CSS Clip Path adalah editor visual untuk membuat bentuk CSS clip-path. Alih-alih menulis nilai clip-path secara manual, Anda dapat menyeret handle pada kanvas interaktif untuk merancang bentuk Anda dan menyalin kode CSS yang dihasilkan.

Pemrosesan sisi klien: Semua pengeditan terjadi di browser Anda — tanpa unggahan, tanpa pelacakan, privasi lengkap.

Mengapa Menggunakan Editor Clip-Path Visual?

Properti CSS clip-path sangat kuat tetapi menantang untuk ditulis secara manual. Bentuk polygon memerlukan pasangan koordinat yang presisi, dan bahkan perubahan kecil memerlukan perhitungan ulang beberapa nilai. Editor visual mengatasi ini dengan memungkinkan Anda:

Umpan Balik Visual Instan

Seret handle dan tonton bentuk diperbarui secara real-time di kanvas.

Kontrol Presisi

Gunakan overlay grid dan input numerik untuk penempatan yang tepat dengan akurasi 0,1%.

28 Preset Siap Pakai

Pilih dari bintang, panah, perisai, dan lainnya — kemudian sesuaikan dengan kebutuhan Anda.

Import Kode yang Ada

Tempel CSS clip-path Anda saat ini untuk mengeditnya secara visual dan menyempurnakannya lebih lanjut.

Jenis Bentuk yang Didukung

Polygon

Buat bentuk apa pun dengan beberapa titik yang terhubung oleh tepi lurus.

Circle

Tentukan area pemotongan melingkar dengan radius dan pusat yang dapat disesuaikan.

Ellipse

Buat bentuk oval dengan radius horizontal dan vertikal independen.

Inset

Potong dari tepi ke dalam dengan border-radius opsional untuk persegi panjang bulat.

Untuk Siapa Ini?

Pengembang frontend yang membangun komponen UI khusus dengan bentuk non-persegi panjang
Desainer web yang membuat bagian hero, masker gambar, dan elemen dekoratif
Pelajar CSS yang mengeksplorasi cara kerja nilai clip-path melalui umpan balik visual

Table of Contents

1. Apa itu Pembuat CSS Clip Path?
2. Cara Menggunakan Pembuat CSS Clip Path
3. Fitur
4. Pertanyaan yang Sering Diajukan

Cara Menggunakan Pembuat CSS Clip Path

Membuat bentuk clip-path hanya membutuhkan beberapa langkah. Ikuti panduan ini untuk menguasai editor visual:

Pilih Jenis Bentuk

Klik salah satu dari empat tab bentuk di bagian atas editor:

Polygon - Untuk bentuk khusus dengan beberapa titik (default)
Circle - Untuk pemotongan melingkar
Ellipse - Untuk bentuk oval
Inset - Untuk pemotongan persegi panjang dari tepi

Atau telusuri bagian Presets untuk memulai dari bentuk siap pakai seperti bintang, panah, atau perisai.

Edit Bentuk

Setiap jenis bentuk memiliki kontrol pengeditan sendiri:

Pengeditan Polygon

Seret handle di kanvas untuk memindahkan titik
Klik pada tepi untuk menambah titik baru di antara titik yang ada
Klik dua kali handle untuk menghapus titik (minimum 3 titik diperlukan)
Gunakan daftar titik di sebelah kiri untuk memasukkan nilai X/Y yang tepat

Pengeditan Circle & Ellipse

Seret handle pusat untuk mengubah posisi bentuk
Seret handle radius untuk mengubah ukuran
Gunakan slider untuk kontrol presisi atas radius dan posisi pusat

Pengeditan Inset

Seret handle tepi untuk menyesuaikan berapa banyak yang dipotong dari setiap sisi
Aktifkan Lock All untuk mengubah keempat sisi secara bersamaan
Sesuaikan Border Radius untuk membulatkan sudut persegi panjang inset

Gunakan Opsi Kanvas

Outside - Alihkan visibilitas area di luar clip-path (ditampilkan sebagai overlay yang redup)
Grid - Tampilkan overlay grid 10×10 untuk penyelarasan
Background - Ubah warna kanvas atau unggah gambar untuk melihat pratinjau clip-path Anda pada konten nyata

Salin CSS

Kode CSS yang dihasilkan muncul di panel output di sebelah kanan. Klik Copy CSS untuk menyalinnya ke clipboard Anda, kemudian tempel ke stylesheet Anda.

Shortcut Keyboard

Shortcut	Aksi
`Ctrl` + `Z` / `Cmd` + `Z`	Batalkan perubahan terakhir
`Ctrl` + `Y` / `Cmd` + `Shift` + `Z`	Ulangi perubahan yang dibatalkan terakhir
Tombol panah	Geser titik polygon yang dipilih sebesar 1%
`Shift` + Tombol panah	Geser titik polygon yang dipilih sebesar 5%
`Delete` / `Backspace`	Hapus titik polygon yang dipilih

Fitur

Editor Visual Interaktif

Kanvas menampilkan bentuk clip-path Anda secara real-time. Seret handle untuk mengubah bentuk dan lihat kode CSS diperbarui secara instan. Kanvas menggunakan rasio aspek 4:3 dengan koordinat berbasis persentase untuk penempatan yang akurat.

Pratinjau real-time: Setiap perubahan yang Anda buat segera tercermin dalam kanvas visual dan output CSS yang dihasilkan.

Dukungan Bentuk Komprehensif

Keempat fungsi bentuk CSS clip-path sepenuhnya didukung dengan antarmuka pengeditan khusus:

Polygon

Tentukan bentuk apa pun dengan jumlah titik tak terbatas yang terhubung oleh garis lurus. Sempurna untuk desain geometris khusus.

Circle

Lingkaran sempurna dengan radius dan posisi pusat yang dapat disesuaikan. Ideal untuk masker gambar melingkar dan avatar.

Ellipse

Oval dengan radius horizontal (X) dan vertikal (Y) independen. Bagus untuk efek melingkar yang teregang.

Inset

Potong ke dalam dari tepi dengan sudut bulat opsional melalui border-radius. Sempurna untuk area konten bingkai.

28 Preset Bawaan

Mulai dari salah satu dari 28 bentuk preset yang diatur dalam 6 kategori untuk mempercepat alur kerja Anda:

Bentuk Dasar

Segitiga, trapesium, belah ketupat, dan bentuk geometris fundamental lainnya.

Polygon Reguler

Pentagon, heksagon, heptagon, dan oktagon dengan sisi yang sempurna simetris.

Bintang

Bintang 4-titik, 5-titik, 6-titik, plus bentuk silang dan X untuk elemen dekoratif.

Panah

Panah arah dalam 4 arah (atas, bawah, kiri, kanan) plus variasi chevron.

Bentuk Kompleks

Gelembung pesan, bevel, rabbet, perisai, dan desain geometris canggih lainnya.

Variasi Circle/Ellipse/Inset

Bentuk melingkar, oval, dan inset yang telah dikonfigurasi sebelumnya dengan konfigurasi umum.

Pengeditan Titik Presisi

Untuk bentuk polygon, setiap titik dapat diedit secara numerik melalui panel daftar titik. Setiap titik menampilkan koordinat X dan Y dengan presisi 0,1%. Pilih titik dengan mengklik barisnya, kemudian sesuaikan dengan bidang input atau tombol panah.

Pro tip: Gunakan tombol panah untuk penyesuaian cepat — tahan Shift untuk kenaikan 5% alih-alih 1%.

Manajemen Titik Cerdas

Menambah Titik

Klik pada Tepi

Klik di mana saja dekat tepi polygon
Titik baru disisipkan di antara simpul terdekat
Harus dalam ~5% dari tepi untuk terdaftar

Menghapus Titik

Beberapa Metode

Klik dua kali handle di kanvas
Pilih titik dan tekan Delete/Backspace
Klik tombol hapus (×) di daftar titik
Minimum 3 titik diterapkan

Fitur Kunci Inset

Saat bekerja dengan bentuk inset, aktifkan "Lock All" untuk mengubah keempat sisi secara bersamaan. Ini berguna ketika Anda menginginkan pemotongan seragam dari semua tepi. Slider border-radius menambahkan sudut bulat ke persegi panjang inset.

Contoh: Inset dengan sudut bulat

/* Uniform 10% inset with 20% corner radius */
clip-path: inset(10% round 20%);

Riwayat Undo/Redo

Setiap perubahan bentuk dicatat dalam tumpukan riwayat (hingga 50 status). Gunakan tombol undo/redo atau shortcut keyboard untuk melangkah melalui riwayat pengeditan Anda tanpa kehilangan pekerjaan Anda.

Kapasitas Riwayat 50 status

Import CSS

Sudah memiliki nilai clip-path? Klik "Import" dan tempel kode CSS Anda. Alat mengurai nilai polygon, circle, ellipse, dan inset dan memuatnya ke editor visual untuk pengeditan lebih lanjut.

Import fleksibel: Bekerja dengan atau tanpa awalan clip-path: — cukup tempel nilainya dan klik Apply.

Pembantu Kanvas

Dua opsi overlay membantu Anda bekerja lebih efektif:

Overlay Area Outside

Overlay yang redup menunjukkan wilayah di luar clip-path Anda, membuat jelas apa yang akan terlihat dan apa yang akan dipotong.

Grid 10×10

Grid berbasis persentase untuk penyelarasan presisi dan simetri saat memposisikan titik.

Latar Belakang Khusus

Lihat pratinjau clip-path Anda pada latar belakang berbeda dengan mengubah warna kanvas atau mengunggah gambar. Ini membantu memvisualisasikan bagaimana bentuk akan terlihat pada konten aktual Anda sebelum menerapkannya dalam desain Anda.

Pemilih warna solid untuk latar belakang sederhana
Unggahan gambar untuk pratinjau konten realistis
Pengalihan latar belakang instan tanpa kehilangan bentuk Anda

Pertanyaan yang Sering Diajukan

Apa itu CSS clip-path?

Properti CSS clip-path mendefinisikan wilayah pemotongan untuk elemen. Hanya bagian di dalam bentuk pemotongan yang terlihat; segalanya di luar disembunyikan. Ini biasanya digunakan untuk membuat tata letak non-persegi panjang, masker gambar, dan elemen UI dekoratif.

Browser mana yang mendukung clip-path?

Properti clip-path dengan bentuk dasar (polygon, circle, ellipse, inset) didukung di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge. Untuk browser yang lebih lama, pertimbangkan untuk menyediakan fallback atau menggunakan polyfill.

Dukungan luar biasa: Lebih dari 97% browser global mendukung clip-path dengan bentuk dasar.

Bagaimana cara menambah titik ke polygon?

Klik di mana saja dekat tepi polygon di kanvas. Titik baru akan disisipkan di antara dua titik yang ada terdekat. Klik harus berada dalam sekitar 5% dari tepi untuk terdaftar.

Bagaimana cara menghapus titik polygon?

Anda memiliki tiga opsi:

Klik dua kali handle di kanvas
Pilih titik dan tekan Delete atau Backspace
Klik tombol hapus (×) di daftar titik

Persyaratan minimum: Polygon harus selalu memiliki setidaknya 3 titik untuk tetap valid.

Bisakah saya mengimpor CSS clip-path yang ada?

Ya. Klik tombol "Import" di bawah output CSS, tempel nilai clip-path Anda (dengan atau tanpa awalan clip-path:), dan klik "Apply". Alat mendukung keempat jenis bentuk: polygon, circle, ellipse, dan inset.

Apa perbedaan antara circle dan ellipse?

Circle

Radius Tunggal

Satu nilai radius
Selalu sempurna bulat
Lebar dan tinggi sama

Ellipse

Dua Radius Independen

Radius X dan Y terpisah
Membuat bentuk oval
Bisa lebih lebar atau lebih tinggi

Apa yang dilakukan nilai "round" dalam inset?

Parameter "round" dalam inset() menambahkan border-radius ke persegi panjang yang dipotong. Sebagai contoh:

Inset dengan sudut bulat

/* 10% inset from all edges with 20% corner radius */
clip-path: inset(10% round 20%);

Mengapa saya tidak bisa menghapus titik polygon?

Polygon memerlukan setidaknya 3 titik untuk menjadi bentuk yang valid. Jika Anda hanya memiliki 3 titik yang tersisa, kontrol delete akan dinonaktifkan untuk mencegah pembuatan polygon yang tidak valid.

Seberapa presisi koordinatnya?

Semua koordinat menggunakan nilai persentase dengan presisi 0,1% (satu tempat desimal). Ini memberikan akurasi yang cukup untuk sebagian besar kasus penggunaan sambil menjaga output CSS tetap bersih dan dapat dibaca.

Bisakah saya menggunakan gambar latar belakang untuk pratinjau?

Ya. Klik tombol unggah di sebelah pemilih warna di area pengaturan kanvas. Pilih file gambar dan itu akan ditampilkan sebagai latar belakang kanvas, memungkinkan Anda melihat pratinjau bagaimana bentuk clip-path Anda akan terlihat pada konten nyata.

Apakah bentuk saya disimpan antar sesi?

Tidak, bentuk tidak disimpan antar pemuatan halaman. Pastikan untuk menyalin kode CSS Anda sebelum meninggalkan halaman. Anda juga dapat menyimpan nilai clip-path Anda secara eksternal dan mengimpornya nanti menggunakan fitur Import.

Ingat untuk menyimpan: Selalu salin output CSS Anda sebelum menutup halaman untuk menghindari kehilangan pekerjaan Anda.

Apakah data saya dikirim ke server mana pun?

Tidak. Semua pengeditan bentuk dan pembuatan CSS terjadi sepenuhnya di browser Anda. Tidak ada data yang diunggah atau ditransmisikan ke server mana pun, termasuk gambar latar belakang apa pun yang Anda muat.

100% sisi klien: Privasi Anda dijamin — semua pemrosesan terjadi secara lokal di perangkat Anda.