Penjana CSS Clip-Path

Alat ini menjana nilai CSS clip-path daripada praset bentuk — bulatan, elips, segi tiga, pentagon, heksagon, bintang, atau segi empat tepat bucu-bulat — dan menunjukkan bentuk terpotong secara langsung pada kotak pratonton sebelum anda menyalin CSS. Tiada keperluan mengira koordinat polygon() secara manual untuk bentuk biasa.

Apakah alat ini?

clip-path ialah sifat CSS yang menyembunyikan segala di luar kawasan tertentu sesuatu elemen, hanya membiarkan bentuk di dalamnya kelihatan — bahagian selebihnya kotak elemen masih ada dalam susun atur, ia hanya tidak dicat. Ia menerima fungsi bentuk asas seperti circle(), ellipse(), inset(), dan polygon(), yang terakhir mengambil senarai pasangan koordinat x/y sewenang-wenangnya untuk mentakrifkan mana-mana bentuk bertepi lurus.

Koordinat polygon() adalah bahagian paling sukar untuk ditulis secara manual — pentagon, heksagon atau bintang masing-masing memerlukan beberapa titik yang diletakkan dengan tepat, dan tersilap satu akan mengganggu keseluruhan bentuk. Alat ini mengira koordinat tersebut untuk anda daripada praset bentuk, mengemas kini pratonton langsung serta-merta, dan memberi anda CSS clip-path yang tepat untuk disalin.

Sumber: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — spesifikasi yang mentakrifkan clip-path dan fungsi bentuk asasnya.

Kenapa guna alat ini?

Pratonton langsung memotong kotak pratonton sebenar kepada bentuk yang dipilih, jadi anda melihat hasil sebenar berbanding membayangkannya daripada koordinat.
Tujuh praset bentuk — bulatan, elips, segi tiga, pentagon, heksagon, bintang, dan segi empat tepat bucu-bulat — meliputi majoriti kes penggunaan clip-path tanpa menulis titik polygon secara manual.
Praset bulatan, elips dan bucu-bulat termasuk pelungsur saiz/kebulatan supaya anda boleh menghaluskan bentuk tanpa mengedit koordinat.
Menghasilkan CSS clip-path standard sedia untuk ditampal pada mana-mana elemen.
Berjalan sepenuhnya dalam pelayar anda — tiada apa yang anda konfigurasikan dimuat naik ke mana-mana. Percuma, tiada pendaftaran, berfungsi pada mudah alih.

Cara menggunakannya

Pilih bentuk daripada menu lungsur — bulatan, elips, segi tiga, pentagon, heksagon, bintang, atau segi empat tepat bucu-bulat.
Untuk bentuk bulatan, elips, dan bucu-bulat, laraskan pelungsur saiz/kebulatan untuk menghaluskan pemotongan.
Perhatikan kotak pratonton dikemas kini secara langsung apabila anda mengubah bentuk atau pelungsur.
Salin CSS clip-path yang dijana dan tampalkannya pada elemen yang anda mahu potong.
Untuk imej berbanding warna pejal, gunakan sifat clip-path yang sama pada <img> atau elemen dengan background-image.

Contoh

Input

Bentuk: Heksagon

Hasil

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Pemotongan heksagon biasa, lazim digunakan untuk foto profil gaya lencana atau ikon ciri.

Bentuk asas vs. polygon()

Bulatan, elips dan inset (segi empat tepat bucu-bulat) ialah fungsi bentuk asas CSS terbina dalam dengan sintaks mudah sendiri — satu atau dua jejari, ditambah kedudukan pusat pilihan atau pembulatan sudut. Segi tiga, pentagon, heksagon dan bintang bukan bentuk terbina dalam; kesemuanya dinyatakan dengan polygon(), senarai rata pasangan koordinat x/y yang menjejaki garis luar bentuk itu. Alat ini mengira koordinat tersebut untuk poligon sekata (jarak sama rata) dan bintang lima-hujung secara automatik, yang merupakan bahagian membosankan untuk dibetulkan secara manual.

Corak clip-path biasa

Avatar atau lencana bulat: circle() pada jejari julat pertengahan, selalunya digabungkan dengan imej sumber segi empat sama supaya bulatan tidak diregang menjadi elips.
Pembahagi seksyen bersudut: poligon tersuai (tidak disertakan sebagai praset di sini) yang mencondongkan tepi atas atau bawah seksyen lebar-penuh untuk pemisahan halaman bukan segi empat tepat.
Bentuk ikon atau lencana penarafan bintang: praset bintang, berguna sebagai bentuk hiasan berbanding SVG lukisan tangan untuk kes ringkas.
Grid foto heksagon: imej terpotong-heksagon disusun dalam susun atur sarang lebah, corak halaman portfolio/pasukan yang biasa.
Segi empat tepat bucu-bulat sebagai alternatif ringan kepada border-radius apabila anda perlukan pemotongan juga memotong kandungan anak yang melimpah, kerana border-radius sahaja tidak memotong anak tanpa overflow:hidden tambahan.

Digandingkan dengan alat CSS lain

clip-path kerap digabungkan dengan gradien CSS sebagai latar belakang yang dipotong, atau dengan box-shadow yang digunakan pada elemen pembungkus (kerana clip-path juga memotong bayang elemen itu sendiri, bayang pada elemen induk adalah jalan penyelesaian biasa untuk bentuk terpotong yang masih perlu kelihatan terapung).

→ Penjana CSS Gradient · Penjana CSS Border-Radius · Penjana CSS Box-Shadow

Soalan lazim

Adakah clip-path menjejaskan saiz susun atur elemen?

Tidak — elemen mengekalkan saiz dan kedudukan kotak asalnya untuk tujuan susun atur; clip-path hanya mengubah apa yang dicat. Elemen sekeliling disusun seolah-olah pemotongan tidak digunakan, yang boleh mengejutkan anda jika anda menjangka bentuk terpotong itu berkelakuan seperti elemen yang diubah saiz.

Kenapa box-shadow tidak muncul pada bentuk terpotong saya?

clip-path memotong keseluruhan rendering elemen, termasuk sebarang bayang yang dilemparkannya, jadi box-shadow elemen yang terpotong-bulatan atau -poligon sendiri terpotong pada sempadan pemotongan. Untuk mendapatkan bayang yang mengikut bentuk yang kelihatan, gunakan box-shadow pada elemen pembungkus tidak terpotong di sekeliling elemen terpotong itu sebaliknya.

Bolehkah saya menganimasikan atau membuat peralihan bentuk clip-path?

Ya, tetapi hanya antara dua nilai clip-path jenis yang sama dan dengan bilangan titik yang sama — sebagai contoh, satu polygon() dengan 6 titik beralih kepada polygon() lain dengan 6 titik. Peralihan antara bentuk yang berbeza secara asas (circle() kepada polygon()) secara umumnya tidak akan beranimasi dengan lancar merentasi pelayar.

Bolehkah clip-path digunakan pada imej latar belakang, bukan sekadar kandungan elemen?

clip-path memotong keseluruhan elemen — termasuk background-image, background-color, sempadan dan kandungannya bersama — berbanding latar belakang secara khusus. Jika anda hanya mahu memotong imej latar belakang sambil mengekalkan kandungan lain tidak terpotong, gunakan clip-path pada elemen berasingan yang hanya memegang latar belakang tersebut.

Adakah clip-path disokong dalam semua pelayar moden?

Ya — clip-path dengan fungsi bentuk asas (circle, ellipse, inset, polygon) telah menjadi Baseline widely available merentasi pelayar utama sejak Januari 2020, mengikut data keserasian MDN. Ia secara umumnya selamat digunakan dalam pengeluaran tanpa fallback untuk versi pelayar semasa.