clip-path CSS
Gratis, tanpa daftar, berjalan di peramban Anda.
Alih-alih menggambar bentuknya, pakai ia untuk memotong sesuatu yang lain. Sebuah `clipPath` di dokumen ditambah satu properti CSS mengubah gambar, video, atau div berwarna menjadi bentuk itu — dan begitulah blob jadi masker avatar alih-alih latar.
Sebuah ekspor clip-path CSS, dipotong sampai beberapa baris pertama
<svg width="0" height="0" style="position:absolute">
<defs>
<clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
<path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
</clipPath>
</defs>
</svg>
/* The element must be 200×200 for the clip to line up. */
.clipped {
width: 200px;
height: 200px;
clip-path: url(#shape-clip);
}Yang perlu diketahui
- Elemennya mempertahankan isinya: ini memotong sebuah foto, bukan duduk di belakangnya.
- Butuh blok `<svg>` sebaris sekaligus aturan CSS-nya — propertinya merujuk clipPath lewat id.
- Elemennya harus cocok dengan ruang koordinat potongannya, itulah sebabnya keluarannya menyebutkan ukuran.
- Ganti id-nya kalau Anda memakai lebih dari satu potongan di halaman yang sama.
Dukungan peramban
Didukung di setiap peramban terkini. `clip-path: url(#id)` yang merujuk clipPath sebaris adalah bentuk paling luas — lebih luas daripada sintaks fungsi `path()` dan `shape()`, yang lebih baru dan tidak sepadan risikonya ketika cara ini tidak berbiaya tambahan.
Ukuran di seluruh prasetel
Setiap prasetel yang bisa diekspresikan format ini, diukur sebagaimana generator mengeluarkannya. Yang terkecil adalah Heksagon dengan 369 bita; yang terbesar adalah Cipratan dengan 859 bita. Jumlah titiklah yang menentukan perbedaannya — setiap titik tambahan menambah satu ruas kubik penuh berisi koordinat.
| Format | Ukuran |
|---|---|
| Heksagon | 369 B |
| Kristal | 374 B |
| Permata bersegi | 400 B |
| Puncak gunung | 423 B |
| Segitiga membulat | 435 B |
| Sapuan | 438 B |
| Zigzag tajam | 456 B |
| Gelombang dalam | 474 B |
| Tepi awan | 487 B |
| Gelombang footer | 510 B |
| Lengkung potong | 511 B |
| Kerikil | 512 B |
| Gelombang halus | 514 B |
| Gelombang berlapis | 544 B |
| Blob halus | 548 B |
| Anak tangga | 550 B |
| Bergelombang | 574 B |
| Blob organik | 620 B |
| Kilau | 626 B |
| Gelombang organik | 670 B |
| Bintang | 769 B |
| Tepi piksel | 771 B |
| Bunga | 775 B |
| Gelembung | 777 B |
| Riak | 847 B |
| Cipratan | 859 B |
Lebih rinci
Keluarannya memakai `clipPathUnits="userSpaceOnUse"` dan memberi tahu Anda ukuran yang harus diberikan ke elemennya, alih-alih bentuk `objectBoundingBox` yang akan menyesuaikan ke elemen mana pun secara otomatis. Itu tampak pilihan yang lebih buruk sampai Anda mencobanya: `objectBoundingBox` menuntut setiap koordinat dinyatakan antara 0 dan 1, artinya jalurnya harus dikeluarkan ulang pada skala lain dan kehilangan sebagian besar ketelitiannya karena pembulatan. Bersikap tegas soal ukuran menjaga kurvanya persis seperti saat digambar.
Pertanyaan
Bentuk apa saja yang bisa jadi clip-path CSS?
Format ini mencakup Gelombang, Blob. Itu batasan nyata, bukan keterbatasan alat ini: kalau sebuah generator tidak ada dalam daftar itu, formatnya memang tidak bisa mengekspresikannya, dan tetap menawarkannya berarti menyerahkan sesuatu yang diam-diam menggambar bentuk yang salah.
Seberapa besar ekspor clip-path CSS?
Antara 369 dan 859 bita di 26 prasetel yang mendukungnya. Lebih sedikit titik adalah tuas yang berpengaruh; kehalusan dan warna tidak memakan biaya.
Bisakah saya menyuntingnya manual setelahnya?
Bisa. Keluarannya teks biasa tanpa komentar generator, tanpa markah pengenal, dan tanpa tautan kembali ke sini. Ganti warnanya, ubah nama kelasnya, atau tempel jalurnya ke SVG Anda sendiri — tidak ada apa pun di hilir yang bergantung pada ia tetap seperti semula.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.