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

Penjana Laluan Klip CSS

Lukis bentuk poligon sewenang-wenangnya — termasuk takuk cekung — dengan menyeret titik pada kotak pratonton langsung atau imej yang anda muat naik sendiri, dan salin nilai laluan klip CSS: poligon(...) yang terhasil.

Seret satu titik untuk mengalihkannya. Klik berhampiran tepi untuk menambah titik di sana. Klik dua kali pada titik untuk mengeluarkannya (minimum 3 mata).

Memproses... 0%

Hasilnya

Laluan klip CSS menerima fungsi poligon() yang diperbuat daripada sebarang bilangan pasangan koordinat x/y, yang bermaksud ia boleh mengukir kotak ke dalam bentuk yang jauh melangkaui segi empat tepat dan bulatan mudah yang dicapai oleh kebanyakan orang. Tangkapannya ialah menaip koordinat tersebut dengan tangan adalah membosankan dan hampir mustahil untuk mendapatkan apa-apa yang tepat di luar segi tiga asas — penjana ini menukar senarai koordinat itu menjadi satu set titik boleh seret pada pratonton langsung, jadi bentuk yang anda lihat sentiasa bentuk yang dihasilkan CSS.

Setiap titik pada pratonton disimpan sebagai peratusan lebar dan ketinggian kotak, iaitu cara clip-path: polygon() itu sendiri berfungsi di bawah hud: bentuk yang dibina dengan cara ini memastikan perkadarannya betul tidak kira saiz elemen itu berakhir di halaman sebenar, daripada topeng ikon kecil hingga sepanduk wira lebar penuh. Seret mana-mana titik untuk membentuk semula garis besar, klik dekat dengan tepi untuk menambah titik baharu tepat di mana anda mengklik, atau klik dua kali pada titik sedia ada untuk memadamkannya — editor sentiasa menyimpan sekurang-kurangnya tiga mata, kerana poligon tidak boleh wujud dengan lebih sedikit.

Enam pratetap yang digabungkan dipilih untuk membuktikan laluan klip 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 yang sebaliknya, dan stub tiket melengkung dua takuk ke tepi bertentangan seperti penampilan tiket berlubang sebenar. Muatkan sebarang pratetap dan terus seret dari sana — tiada apa-apa tentang editor mengunci anda ke dalam bentuk permulaan.

Muat naik imej anda sendiri untuk pratonton laluan klip terhadap kandungan sebenar dan bukannya kotak biasa, atau langkau muat naik sepenuhnya dan pratonton kembali kepada corak berjalur supaya bentuk potongan kekal jelas kelihatan sama ada. Seperti setiap alat di tapak ini, semuanya berjalan secara setempat dalam penyemak imbas: tiada imej yang meninggalkan peranti anda dan penjana terus berfungsi di luar talian setelah halaman dimuatkan.

🛡️
Dilaksanakan dalam Pelayar

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

Format & Peraturan yang Diterima

  • Pemegang mata boleh diseret (tetikus, sentuhan dan kekunci anak panah menyenggol) dengan mengemas kini langsung klip-laluan: poligon(...) output semasa anda menggerakkannya.
  • Klik berhampiran mana-mana tepi untuk memasukkan titik baharu di sana, klik dua kali pada titik untuk mengeluarkannya (minimum 3 mata sentiasa disimpan).
  • Pratetap untuk bentuk anak panah, bintang, heksagon, gelembung pertuturan dan tunas tiket — termasuk garisan cekung yang benar-benar tidak cembung — serta muat naik imej pilihan supaya anda boleh pratonton klip pada gambar anda sendiri.

Faedah Utama

✓ Setiap seretan titik menulis semula laluan klip langsung pada pratonton serta-merta, jadi anda melihat bentuk yang tepat sebelum menyalin satu baris CSS.
✓ Mata disimpan sebagai peratusan, sama seperti clip-path: polygon() itu sendiri, jadi bentuk yang dibina pada sebarang saiz pratonton kekal betul pada sebarang saiz elemen dalam reka letak anda sendiri.
✓ Enam pratetap permulaan — termasuk bintang, gelembung pertuturan dan stub tiket berlekuk — bentuk penutup yang mungkin memerlukan banyak tekaan koordinat manual.

Kes Penggunaan

  • • Ukir imej wira atau lakaran kecil kad ke dalam anak panah, bintang atau heksagon dengan menyeret titik pratetap, kemudian salin laluan klip yang tepat: polygon(...) CSS.
  • • Bina bentuk yang benar-benar cekung — ekor gelembung pertuturan atau stub tiket berlekuk — yang tidak dapat dihasilkan oleh imej jejari sempadan atau topeng yang ringkas.
  • • Muat naik foto anda sendiri untuk menyemak dengan tepat rupa pemangkasan poligon tersuai sebelum menghantar nilai laluan klip ke halaman sebenar.