Generator CSS Clip-Path

Alat ini menghasilkan nilai CSS clip-path dari preset bentuk — lingkaran, elips, segitiga, segi lima, segi enam, bintang, atau persegi bersudut membulat — dan menampilkan bentuk yang terpotong secara langsung pada kotak pratinjau sebelum Anda menyalin CSS-nya. Tidak perlu menghitung manual koordinat polygon() untuk bentuk-bentuk umum.

Apa Itu Alat Ini?

clip-path adalah properti CSS yang menyembunyikan segala sesuatu di luar area tertentu dari sebuah elemen, hanya menyisakan bentuk di dalamnya yang terlihat — sisa kotak elemen tersebut tetap ada dalam layout, hanya saja tidak digambar. Properti ini menerima fungsi bentuk dasar seperti circle(), ellipse(), inset(), dan polygon(), yang terakhir menerima daftar pasangan koordinat x/y bebas untuk mendefinisikan bentuk bertepi lurus apa pun.

Koordinat polygon() adalah bagian paling sulit ditulis manual — segi lima, segi enam, atau bintang masing-masing butuh beberapa titik yang ditempatkan secara presisi, dan satu kesalahan saja mengubah seluruh bentuk. Alat ini menghitung koordinat tersebut untuk Anda dari preset bentuk, memperbarui pratinjau langsung seketika, dan memberikan kode CSS clip-path yang tepat untuk disalin.

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

Mengapa Menggunakannya?

Pratinjau langsung memotong kotak pratinjau sungguhan sesuai bentuk yang dipilih, jadi Anda melihat hasil sebenarnya alih-alih membayangkannya dari koordinat.
Tujuh preset bentuk — lingkaran, elips, segitiga, segi lima, segi enam, bintang, dan persegi bersudut membulat — mencakup sebagian besar kasus penggunaan clip-path tanpa menulis manual titik-titik polygon.
Preset lingkaran, elips, dan persegi bersudut membulat menyertakan slider ukuran/kebulatan agar Anda bisa menyempurnakan bentuk tanpa mengedit koordinat.
Menghasilkan kode CSS clip-path standar yang siap ditempel ke elemen mana pun.
Berjalan sepenuhnya di browser Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun. Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Pilih bentuk dari dropdown — lingkaran, elips, segitiga, segi lima, segi enam, bintang, atau persegi bersudut membulat.
Untuk bentuk lingkaran, elips, dan persegi bersudut membulat, sesuaikan slider ukuran/kebulatan untuk menyempurnakan potongan.
Lihat kotak pratinjau diperbarui secara langsung saat Anda mengubah bentuk atau slider.
Salin kode CSS clip-path yang dihasilkan dan tempelkan ke elemen yang ingin Anda potong.
Untuk gambar alih-alih warna solid, terapkan properti clip-path yang sama ke <img> atau elemen dengan background-image.

Contoh

Input

Shape: Hexagon

Output

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%);

Potongan segi enam beraturan, umum digunakan untuk foto profil bergaya badge atau ikon fitur.

Bentuk dasar vs. polygon()

Lingkaran, elips, dan inset (persegi bersudut membulat) adalah fungsi bentuk dasar CSS bawaan dengan sintaks sederhana masing-masing — satu atau dua radius, ditambah posisi pusat opsional atau kelengkungan sudut. Segitiga, segi lima, segi enam, dan bintang bukan bentuk bawaan; semuanya diekspresikan dengan polygon(), daftar datar pasangan koordinat x/y yang menelusuri garis luar bentuk. Alat ini menghitung koordinat tersebut secara otomatis untuk poligon beraturan (berjarak sama) dan bintang berujung lima, yang merupakan bagian paling merepotkan untuk dikerjakan dengan benar secara manual.

Pola clip-path umum

Avatar atau badge lingkaran: circle() dengan radius menengah, sering dikombinasikan dengan gambar sumber persegi agar lingkaran tidak melar menjadi elips.
Pemisah bagian bersudut: poligon kustom (tidak termasuk sebagai preset di sini) yang memiringkan tepi atas atau bawah sebuah bagian selebar penuh untuk pemisah halaman non-persegi panjang.
Ikon rating bintang atau bentuk badge: preset bintang, berguna sebagai bentuk dekoratif alih-alih SVG yang digambar manual untuk kasus sederhana.
Grid foto segi enam: gambar terpotong segi enam yang disusun dalam tata letak sarang lebah, pola umum untuk portofolio/halaman tim.
Persegi bersudut membulat sebagai alternatif ringan untuk border-radius saat Anda perlu potongan juga memotong konten anak yang meluap, karena border-radius saja tidak memotong elemen anak tanpa overflow:hidden tambahan.

Memadukan dengan alat CSS lain

clip-path sering dikombinasikan dengan gradien CSS sebagai latar yang dipotong, atau dengan box-shadow yang diterapkan pada elemen pembungkus (karena clip-path juga memotong bayangan elemen itu sendiri, bayangan pada elemen induk biasanya menjadi solusi untuk bentuk terpotong yang tetap perlu terlihat melayang).

→ Generator Gradien CSS · Generator Border Radius · Generator Box Shadow

Pertanyaan yang Sering Diajukan

Apakah clip-path memengaruhi ukuran layout elemen?

Tidak — elemen tetap mempertahankan ukuran dan posisi kotak aslinya untuk keperluan layout; clip-path hanya mengubah apa yang digambar. Elemen di sekitarnya ditata seolah-olah potongan tidak diterapkan, yang bisa mengejutkan jika Anda berharap bentuk yang dipotong berperilaku seperti elemen yang diubah ukurannya.

Mengapa box-shadow tidak muncul pada bentuk yang saya potong?

clip-path memotong seluruh rendering elemen, termasuk bayangan apa pun yang dilemparkannya, sehingga box-shadow milik elemen yang dipotong lingkaran atau poligon ikut terpotong di batas potongan. Untuk mendapatkan bayangan yang mengikuti bentuk yang terlihat, terapkan box-shadow pada elemen pembungkus yang tidak dipotong di sekitar elemen yang dipotong.

Bisakah saya menganimasikan atau membuat transisi bentuk clip-path?

Bisa, tetapi hanya antara dua nilai clip-path dengan tipe yang sama dan jumlah titik yang sama — misalnya, satu polygon() dengan 6 titik yang bertransisi ke polygon() lain dengan 6 titik. Transisi antara bentuk yang secara fundamental berbeda (circle() ke polygon()) umumnya tidak akan beranimasi mulus di semua browser.

Bisakah clip-path digunakan pada gambar latar, tidak hanya konten elemen?

clip-path memotong seluruh elemen — termasuk background-image, background-color, border, dan konten sekaligus — bukan latar secara spesifik. Jika Anda hanya ingin memotong gambar latar sambil membiarkan konten lain tidak terpotong, terapkan clip-path pada elemen terpisah yang hanya menampung latar tersebut.

Apakah clip-path didukung di semua browser modern?

Ya — clip-path dengan fungsi bentuk dasar (circle, ellipse, inset, polygon) telah tersedia secara luas (Baseline) di browser-browser utama sejak Januari 2020, menurut data kompatibilitas MDN. Umumnya aman digunakan di produksi tanpa fallback untuk versi browser saat ini.