⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Penjana Clip-Path CSS

Lukis sebarang bentuk poligon — termasuk takukan cekung — dengan menyeret titik pada kotak pratonton langsung atau imej yang dimuat naik sendiri, dan salin nilai clip-path: polygon(...) CSS yang terhasil.

🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.

Seret titik untuk mengalihkannya. Klik berhampiran sisi untuk menambah titik di situ. Dwiklik titik untuk membuangnya (minimum 3 titik).

Memproses... 0%

Keputusan

Clip-path CSS menerima fungsi polygon() yang terdiri daripada sebarang bilangan pasangan koordinat x/y, bermakna ia boleh mengukir kotak menjadi bentuk yang jauh melampaui segi empat tepat dan bulatan mudah yang biasa digunakan orang. Kesukarannya ialah menaip koordinat itu dengan tangan adalah leceh dan hampir mustahil untuk dibuat tepat bagi apa-apa yang lebih daripada segi tiga asas — penjana ini menukarkan senarai koordinat itu kepada set titik boleh seret pada pratonton langsung, supaya bentuk yang anda lihat sentiasa bentuk yang dihasilkan oleh CSS.

Setiap titik pada pratonton disimpan sebagai peratusan lebar dan tinggi kotak, tepat seperti cara clip-path: polygon() sendiri berfungsi di sebalik tabir: bentuk yang dibina dengan cara ini mengekalkan perkadaran yang betul tidak kira apa saiz elemen akhirnya dalam halaman sebenar, daripada topeng ikon kecil hingga sepanduk wira lebar penuh. Seret mana-mana titik untuk membentuk semula garis luar, klik dekat dengan sisi untuk menambah titik baharu tepat di tempat anda klik, atau dwiklik titik sedia ada untuk memadamkannya — editor sentiasa mengekalkan sekurang-kurangnya tiga titik, memandangkan poligon tidak boleh wujud dengan bilangan yang kurang.

Enam pratetap yang disertakan dipilih untuk membuktikan clip-path boleh melakukan lebih daripada bentuk cembung: bintang dan anak panah kedua-duanya bergantung pada sudut refleks yang menghala ke dalam, gelembung pertuturan mengukir ekor segi tiga daripada segi empat tepat biasa, dan keratan tiket melengkungkan dua takuk ke sisi bertentangan seperti rupa tiket tebuk sebenar. Muatkan mana-mana pratetap dan teruskan menyeret dari situ — tiada apa-apa tentang editor yang mengunci anda kepada bentuk permulaan.

Muat naik imej anda sendiri untuk pratonton clip-path terhadap kandungan sebenar dan bukannya kotak kosong, atau langkau muat naik sepenuhnya dan pratonton akan kembali kepada corak berjalur supaya bentuk potongan kekal jelas kelihatan dalam mana-mana cara. Seperti semua alat di tapak ini, keseluruhan proses berjalan secara setempat dalam pelayar: tiada imej meninggalkan peranti anda, dan penjana terus berfungsi di luar talian selepas halaman dimuatkan.

Seronok menggunakan alat ini? Rasa produk ini berguna? Nampak potensi di dalamnya dan ingin menyokongnya?

🛡️
Dilaksanakan Dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya luar talian. 100% Selamat.

Format & Peraturan Diterima

  • Pemegang titik boleh seret (tetikus, sentuhan dan nuding kekunci anak panah) dengan output clip-path: polygon(...) yang dikemas kini langsung semasa anda menggerakkannya.
  • Klik berhampiran mana‑mana sisi untuk memasukkan titik baharu di situ, dwiklik titik untuk membuangnya (minimum 3 titik sentiasa dikekalkan).
  • Pratetap untuk bentuk anak panah, bintang, heksagon, gelembung pertuturan dan keratan tiket — termasuk garis luar benar-benar cekung, bukan cembung — serta pilihan muat naik imej supaya anda boleh pratonton klip pada gambar sendiri.

Faedah Utama

✓ Setiap kali seret titik, clip-path langsung dikemas kini pada pratonton, jadi anda dapat lihat bentuk tepat sebelum menyalin walau sebaris CSS.
✓ Titik disimpan sebagai peratusan, sama seperti clip-path: polygon() itu sendiri, jadi bentuk yang dibina pada sebarang saiz pratonton kekal tepat pada sebarang saiz elemen dalam reka letak anda.
✓ Enam pratetap permulaan — termasuk bentuk bintang, gelembung pertuturan dan keratan tiket bertakuk — merangkumi bentuk yang sebaliknya memerlukan banyak tekaan koordinat secara manual.

Kes Penggunaan

  • • Bentuk imej wira atau lakaran kenit kad kepada bentuk anak panah, bintang atau heksagon dengan menyeret titik pratetap, kemudian salin CSS clip-path: polygon(...) yang tepat.
  • • Bina bentuk cekung yang benar-benar asli — seperti ekor gelembung ucapan atau keratan tiket bertakuk — yang tidak dapat dihasilkan oleh border-radius atau imej topeng biasa.
  • • Muat naik foto anda sendiri untuk menyemak dengan tepat bagaimana potongan poligon tersuai akan kelihatan sebelum menghantar nilai clip-path ke halaman sebenar.