Generator clip-path CSS
Generator intuitif untuk membuat bentuk clip-path CSS.
Editor
Klik untuk menambah simpul. Seret untuk memindahkan. Klik kanan untuk menghapus.
Pengaturan Pratinjau
Animasi Hover
Jika diaktifkan, kode hover CSS akan dibuat. Pastikan jumlah simpul sama.
Mengedit bentuk dasar. Beralih ke hover untuk mengatur animasi.
Kode Dihasilkan
Anda mungkin juga suka
Tentang Generator
Buat properti clip-path CSS dengan mudah via seret dan lepas.
Hasilkan kode CSS dengan satu klik, tanpa perhitungan manual.
Mendukung berbagai bentuk dan animasi hover.
Cara Menggunakan
1️⃣ Pilih Bentuk
Pilih preset.
2️⃣ Sesuaikan
Seret simpul.
3️⃣ Salin Kode
Salin dan tempel di CSS atau Tailwind Anda.
Panduan Properti
Penjelasan fungsi:
■ polygon() — Poligon
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Jumlah titik kordinat bebas. Minimal 3.
■ circle() — Lingkaran
clip-path: circle(radius at centerX centerY)
Menentukan radius dan titik pusat.
■ ellipse() — Elips
clip-path: ellipse(rx ry at centerX centerY)
Menggambar elips.
■ inset() — Potongan Persegi Panjang
clip-path: inset(atas kanan bawah kiri round radius)
Memotong dari batas luar. Mendukung sudut membulat.
FAQ
- Q.Apakah clip-path memengaruhi SEO?
- Tidak. Ini hanya mengubah visual, bukan struktur HTML.
- Q.Perbedaan CSS dan SVG?
- CSS menggunakan fungsi di stylesheet. SVG lebih baik untuk path yang sangat kompleks.
- Q.Bisa animasi saat hover?
- Ya, selama jumlah simpulnya persis sama.
- Q.Apakah area luar bisa diklik?
- Tidak. Event klik tidak memicu di luar area yang terpotong.
- Q.Ada risiko keamanan?
- Sama sekali tidak. Semua berjalan secara lokal di browser.
Contoh
Potongan Diagonal
Buat header hero dinamis.
Gambar Profil Unik
Potong avatar menjadi heksagon atau bintang.
Animasi Hover
Perbesar gambar saat kursor diarahkan.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.