Kategori: Alat pengembang
Generator Clip-Path CSS
Pilih sebuah bentuk dan salin nilai clip-path-nya
Pilih sebuah bentuk, dari lingkaran atau elips sampai segi enam, panah, atau balon percakapan, sesuaikan seberapa jauh insetnya dari tepi, lalu salin nilai clip-path yang dihasilkan dengan pratinjau langsung.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Menulis polygon clip-path secara manual berarti memetakan posisi persentase tiap titik dan membayangkan bagaimana titik-titik itu tersambung, yang lambat untuk diiterasi untuk apa pun di luar segitiga sederhana. Alat ini menyediakan sekumpulan bentuk umum sebagai daftar titik siap pakai, ditambah satu kontrol inset yang menyusutkan setiap titik ke arah tengah dengan cara yang sama untuk bentuk apa pun, sehingga Anda bisa mempratinjau dan menyalin clip-path yang siap pakai tanpa mengerjakan geometrinya sendiri.
Cara memakainya
- Pilih sebuah bentuk.
- Sesuaikan inset untuk membesarkan atau mengecilkannya di dalam kotaknya.
- Salin deklarasi clip-path-nya.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Kenapa circle dan ellipse berperilaku beda dari bentuk lainnya?
- circle() dan ellipse() menerima sebuah radius, jadi insetnya langsung menyusutkan radius itu, sementara bentuk polygon menyusutkan setiap titik ke arah tengah dengan persentase yang sama.
- Apakah clip-path memengaruhi tata letak atau hanya apa yang terlihat?
- Hanya apa yang terlihat. Elemennya tetap memakai kotak aslinya untuk keperluan tata letak; clip-path hanya menyembunyikan bagian di luar bentuknya, sama seperti overflow: hidden menyembunyikan konten di luar sebuah kotak.
- Apakah ada yang dikirim ke server?
- Tidak. Titik-titik bentuknya dihitung di halaman dari pilihan bentuk dan inset Anda, itu sebabnya pratinjaunya berubah seketika.