Generator clip-path CSS

Apa itu Generator clip-path CSS?

Generator clip-path CSS adalah editor visual gratis untuk properti CSS clip-path, dibuat untuk pengembang front-end dan desainer yang ingin memotong elemen menjadi bentuk non-persegi. Pilih preset dari menu dropdown: circle() dan ellipse() dengan radius dan titik pusat, polygon() dengan sebanyak mungkin titik sudut yang Anda butuhkan, inset() dengan empat offset tepi, atau varian inset() membulat dengan radius sudut. Setiap parameter adalah persentase yang dimasukkan melalui input angka, dan kotak pratinjau berlatar papan catur menampilkan bentuk hasilnya secara waktu nyata. CSS clip-path lengkap dibuatkan untuk Anda salin. Gunakan untuk memasker gambar, membuat pembatas bagian diagonal, membangun avatar heksagonal, atau memotong bentuk balon ucapan tanpa menghitung koordinat secara manual.

Cara menggunakan Generator clip-path CSS

1. Pilih bentuk dari menu dropdown preset: lingkaran, elips, poligon, inset, atau membulat.
2. Untuk lingkaran atau elips, atur radius (atau radius X/Y) dan posisi pusat X/Y dalam persen.
3. Untuk poligon, edit X dan Y setiap titik sudut dalam persen; klik Tambah titik untuk menambah titik sudut dan atur ulang urutannya dengan mengedit nilainya.
4. Untuk inset atau membulat, atur offset atas, kanan, bawah, dan kiri; membulat juga memerlukan radius sudut.
5. Lihat pratinjau langsung memotong kotak saat Anda mengetik.
6. Salin CSS clip-path yang dihasilkan dan tempel ke lembar gaya Anda.

Contoh

Preset lingkaran, radius 50%, pusat 50% 50%

clip-path: circle(50% at 50% 50%);

Preset poligon, titik (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset membulat, inset 10% semua sisi, radius sudut 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Pertanyaan yang sering diajukan

Untuk apa clip-path digunakan?

Properti CSS clip-path memotong elemen menjadi bentuk dasar, sehingga hanya area di dalam bentuk yang tetap terlihat. Sangat cocok untuk avatar bulat, potongan bagian diagonal, kisi heksagonal, masker gambar, dan balon ucapan — semuanya tanpa gambar atau berkas SVG tambahan.

Bagaimana cara kerja preset poligon?

polygon() menggambar bentuk dengan menghubungkan daftar titik sudut X/Y secara berurutan. Edit nilai persen setiap titik, dan gunakan Tambah titik untuk menyisipkan lebih banyak titik sudut; titik terakhir otomatis terhubung kembali ke titik pertama. Minimal tiga titik dipertahankan agar bentuk tetap valid.

Mengapa nilainya dalam persen?

Persentase membuat pemotongan menskala bersama elemen, sehingga clip-path yang sama bekerja pada ukuran apa pun. 0% adalah tepi kiri atau atas dan 100% adalah tepi kanan atau bawah dari kotak elemen.

Apa yang ditambahkan preset membulat?

Preset membulat menggunakan inset() dengan radius sudut round, menghasilkan persegi panjang yang dipotong ke dalam di setiap sisi dan diberi sudut membulat — berguna untuk potongan berbingkai yang lembut, yang tidak bisa dipadukan oleh border-radius biasa dengan potongan inset.

Apakah data saya dikirim ke mana pun?

Tidak. Generator ini berjalan sepenuhnya di browser Anda dengan JavaScript — nilai bentuk Anda tidak pernah meninggalkan perangkat Anda, jadi ia bekerja secara pribadi dan bahkan offline setelah halaman dimuat.