Generator Clip-Path CSS
Gambar bentuk poligon sembarang — termasuk takik cekung — dengan menyeret titik pada kotak pratinjau langsung atau gambar yang Anda unggah, lalu salin nilai clip-path: polygon(...) CSS yang dihasilkan.
🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.
Hasil
CSS clip-path menerima fungsi polygon() yang terdiri dari sejumlah pasangan koordinat x/y, yang berarti ia bisa mengukir sebuah kotak menjadi bentuk jauh melampaui persegi panjang dan lingkaran sederhana yang kebanyakan orang gunakan. Masalahnya, mengetik koordinat itu secara manual melelahkan dan hampir mustahil dilakukan dengan benar untuk sesuatu di luar segitiga dasar — generator ini mengubah daftar koordinat itu menjadi sekumpulan titik yang bisa diseret di pratinjau langsung, jadi bentuk yang Anda lihat selalu merupakan bentuk yang dihasilkan oleh CSS.
Setiap titik di pratinjau disimpan sebagai persentase lebar dan tinggi kotak, yang persis seperti cara kerja clip-path: polygon() sendiri di balik layar: bentuk yang dibuat dengan cara ini mempertahankan proporsinya dengan benar tidak peduli ukuran elemen akhirnya di halaman nyata, dari masker ikon kecil hingga spanduk pahlawan lebar penuh. Seret titik mana pun untuk membentuk ulang garis luar, klik di dekat tepi untuk menambahkan titik baru tepat di tempat Anda mengklik, atau klik ganda titik yang ada untuk menghapusnya — editor selalu mempertahankan setidaknya tiga titik, karena poligon tidak bisa ada dengan jumlah yang lebih sedikit.
Enam prasetel yang disertakan dipilih untuk membuktikan bahwa clip-path bisa melakukan lebih dari sekadar bentuk cembung: bintang dan panah keduanya mengandalkan sudut refleks yang mengarah ke dalam, gelembung ucapan mengukir ekor segitiga dari persegi panjang biasa, dan stub tiket membuat dua takik pada tepi yang berlawanan seperti tampilan tiket perforasi asli. Muat prasetel apa pun dan lanjutkan menyeret dari sana — tidak ada dalam editor yang mengunci Anda ke bentuk awal.
Unggah gambar Anda sendiri untuk melihat pratinjau clip-path terhadap konten nyata alih-alih kotak polos, atau lewati unggahan sepenuhnya dan pratinjau akan beralih ke pola bergaris sehingga bentuk potongan tetap terlihat jelas dengan cara apa pun. Seperti semua alat di situs ini, semuanya berjalan secara lokal di browser: tidak ada gambar yang pernah meninggalkan perangkat Anda, dan generator tetap bekerja secara offline setelah halaman dimuat.