Generator Jalur Klip CSS

Jalur klip CSS menerima fungsi poligon() yang terbuat dari sejumlah pasangan koordinat x/y, yang berarti dapat mengukir kotak menjadi bentuk yang jauh melampaui persegi panjang dan lingkaran sederhana yang kebanyakan orang bisa capai. Masalahnya adalah mengetikkan koordinat tersebut dengan tangan adalah hal yang membosankan dan hampir mustahil untuk mendapatkan hasil yang tepat selain segitiga dasar — ​​generator ini mengubah daftar koordinat tersebut menjadi sekumpulan titik yang dapat diseret pada pratinjau langsung, sehingga bentuk yang Anda lihat selalu merupakan bentuk yang dihasilkan CSS.

Setiap titik di pratinjau disimpan sebagai persentase dari lebar dan tinggi kotak, dan itulah cara kerja clip-path: polygon() sendiri: bentuk yang dibuat dengan cara ini menjaga proporsinya tetap benar, berapa pun ukuran elemen di halaman sebenarnya, mulai dari topeng ikon kecil hingga spanduk pahlawan berukuran penuh. Seret titik mana pun untuk membentuk ulang kerangka, klik di dekat tepi untuk menambahkan titik baru tepat di tempat yang Anda klik, atau klik dua kali titik yang ada untuk menghapusnya — editor selalu menyimpan setidaknya tiga titik, karena poligon tidak bisa ada jika lebih sedikit.

Enam preset yang dibundel dipilih untuk membuktikan jalur klip dapat 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 potongan tiket membuat dua takik pada tepi yang berlawanan seperti tampilan tiket berlubang yang sebenarnya. Muat preset apa pun dan terus seret dari sana — editor tidak mengunci Anda pada bentuk awal.

Unggah gambar Anda sendiri untuk mempratinjau jalur klip dengan konten sebenarnya, bukan kotak biasa, atau lewati unggahan seluruhnya dan pratinjau akan kembali ke pola bergaris sehingga bentuk potongan tetap terlihat jelas. Seperti setiap alat di situs ini, semuanya berjalan secara lokal di browser: tidak ada gambar yang keluar dari perangkat Anda, dan generator tetap bekerja offline setelah halaman dimuat.