CSS Clip-Jalur Generator

Cara menggunakan

1. Pilih jenis bentuk: poligon, lingkaran, elips, atau inset (persegi panjang dengan sudut membulat opsional).
2. Seret titik kontrol: pindahkan pegangan bentuk pada pratinjau untuk menyesuaikan area mask secara tepat.
3. Salin CSS: nilai properti clip-path yang dihasilkan siap untuk ditempel ke stylesheet Anda.

Mengapa menggunakan generator CSS clip-path?

CSS clip-path membuat bentuk non-persegi dengan menutupi semua yang berada di luar area yang ditentukan. Digunakan untuk pemisah seksi diagonal, pemotongan gambar heksagonal, bentuk tombol kustom, efek hover kreatif, dan reveal gambar yang ditutupi. Menulis koordinat poligon clip-path secara manual berarti menghitung persentase setiap titik sudut, membosankan dan sulit divisualisasikan. Generator interaktif ini memungkinkan Anda menyeret titik secara visual dan mendapatkan nilai CSS yang tepat secara seketika.

Fitur

• Editor poligon: tambahkan, pindahkan, dan hapus titik untuk membuat bentuk apa pun.
• Preset bawaan: diagonal, chevron, heksagon, bintang, segitiga, dan bentuk umum lainnya.
• Mode lingkaran dan elips: kontrol visual untuk mask lingkaran atau elips.
• Mode inset: buat mask persegi panjang dengan border-radius individual untuk setiap sudut.
• Pratinjau area yang ditutupi: lihat bagian yang ditutupi disorot untuk mengetahui persis apa yang akan disembunyikan.

Pertanyaan umum

Apakah clip-path memengaruhi area yang dapat diklik?

Ya. Secara default, peristiwa pointer hanya dicatat di dalam area mask, area yang ditutupi tidak terlihat dan tidak dapat diklik. Untuk membuat elemen sepenuhnya dapat diklik sambil menyembunyikannya secara visual, gunakan pointer-events: all pada elemen atau tumpukkan lapisan transparan.

Bisakah saya menganimasikan clip-path?

Ya, clip-path dapat menjadi subjek transisi dan animasi CSS. Animasikan antara dua poligon dengan jumlah titik yang sama untuk efek morphing yang halus. Bentuk dengan jumlah titik yang berbeda akan dianimasikan dengan lompatan, bukan interpolasi.

Apakah clip-path didukung oleh semua browser?

clip-path didukung oleh semua browser modern. Untuk bentuk SVG melalui sintaks url(#id), dukungannya bahkan lebih luas. Nilai dasar polygon, circle, ellipse, dan inset berfungsi secara universal di Chrome, Firefox, Safari, dan Edge.

Apa yang sebenarnya dilakukan CSS clip-path

Properti CSS clip-path menutupi elemen ke bentuk yang dipilih: apa pun di dalam bentuk terlihat, semuanya di luar menjadi transparan. Kotak tata letak elemen tidak berubah (masih menempati persegi panjang yang sama untuk tujuan keruntuhan margin, alur, dan posisi saudara), tetapi hanya piksel di dalam wilayah klip yang digambar. Ini membuat clip-path berbeda dari pemotongan (yang secara permanen mengubah gambar) dan berbeda dari posisi (yang menggerakkan hal-hal): clip-path adalah masker waktu tampilan yang diterapkan tepat sebelum piksel mengenai layar.

Ada empat fungsi bentuk dasar: polygon() (daftar simpul sebagai koordinat persen atau piksel), circle() (jari-jari ditambah pusat), ellipse() (dua jari-jari ditambah pusat), dan inset() (persegi panjang yang diukur dari setiap tepi, opsional dengan sudut bulat). Untuk bentuk yang terlalu kompleks untuk keempat ini (kurva tidak teratur, bintang dengan lekukan cekung, garis luar kaligrafi), clip-path juga menerima jalur SVG melalui path() atau referensi ke elemen SVG melalui url(#id). Browser menggambar elemen, kemudian menggabungkannya melalui masker alpha yang ditentukan oleh bentuk Anda.

clip-path penting untuk desain web modern karena memungkinkan bentuk yang akan memerlukan editor gambar satu dekade yang lalu. Pembagi bagian diagonal, kotak avatar heksagonal, banner chevron, foto berbentuk bintang: semua sekarang mungkin dalam CSS murni, dapat diskalakan ke ukuran apa pun, dapat dianimasikan saat hover, dan dapat diakses karena elemen yang mendasarinya masih HTML, bukan gambar yang dirasterisasi. Trade-off adalah verbositas: menulis polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) dengan tangan untuk berlian sederhana dapat dilakukan, tetapi bintang 12-simpul atau pemotongan logo khusus tidak praktis tanpa editor visual. Di situlah generator ini cocok.

Cara kerja alat ini di balik layar

Pratinjau adalah div dengan clip-path pilihan Anda diterapkan sebagai CSS sebaris, diperbarui pada setiap penyeretan gagang kontrol. Gagang adalah lingkaran yang diposisikan secara absolut yang ditumpuk di atas pratinjau pada koordinat persen setiap simpul. Saat Anda menyeret gagang, JavaScript menangkap peristiwa mousemove (atau touchmove), mengubah posisi piksel menjadi persentase area pratinjau, memperbarui simpul itu dalam poligon dalam memori, dan menerapkan kembali string clip-path. Rendering waktu nyata berarti Anda melihat bentuk berubah saat Anda menyeret, bukan setelahnya.

CSS yang dihasilkan dibangun dengan menggabungkan simpul menjadi string poligon: polygon(x1% y1%, x2% y2%, ...) untuk mode poligon, atau circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) untuk jenis bentuk yang lebih sederhana. Nilai persen daripada nilai piksel digunakan karena persentase secara otomatis diskalakan dengan elemen: poligon yang terlihat benar pada 300x200 juga terlihat benar pada 600x400 tanpa perubahan pada CSS. Kotak kode diperbarui pada setiap interaksi, dan tombol Salin CSS menulis nilai saat ini ke clipboard Anda.

Tidak ada yang meninggalkan browser Anda. Pratinjau, perhitungan bentuk, generasi CSS, dan salinan clipboard semuanya adalah JavaScript sisi klien. Tidak ada permintaan jaringan yang dibuat; tidak ada gambar yang diunggah; tidak ada analitik tentang pilihan bentuk Anda. Alat ini tidak memiliki backend sama sekali di luar HTML statis dan JavaScript yang disajikan sekali pada pemuatan pertama. Buka tab jaringan browser saat digunakan dan Anda akan melihat nol permintaan setelah pemuatan halaman awal. CSS yang Anda hasilkan adalah milik Anda untuk ditempel ke stylesheet mana pun.

Sejarah singkat kliping CSS

• SVG clipPath, 2001.Spesifikasi SVG 1.0 (Rekomendasi W3C, September 2001) memperkenalkan , memungkinkan elemen SVG apa pun untuk ditutupi oleh bentuk lain. Kliping SVG menangani jalur yang kompleks tetapi membutuhkan markup SVG sebaris, membatasi penggunaan kembali di halaman HTML biasa tanpa kelancaran SVG.
• Properti CSS clip, 1998 hingga 2010-an.Properti CSS clip asli (spesifikasi CSS 2, 1998) hanya mendukung rect(), klip persegi panjang empat nilai pada elemen yang diposisikan secara absolut. Terbatas dan dihapuskan pada tahun 2014, tetapi masih terlihat dalam pola CSS warisan "hanya pembaca layar" di mana konten yang terlihat dipotong menjadi 1x1 piksel untuk aksesibilitas.
• CSS Masking Module Level 1, 2014.W3C menerbitkan spesifikasi CSS Masking Module Level 1 (April 2014), memperkenalkan properti clip-path modern dengan dukungan poligon, lingkaran, elips, inset, dan SVG-path. Chrome 24 (Januari 2013) dan Safari 7 (Juni 2013) mengirimkan bentuk dasar lebih dulu dari spesifikasi formal; Firefox mengikuti di versi 54 (Juni 2017).
• Gelombang desain web brutalist Adobe, 2015 hingga 2017.Bagian hero dengan pemotongan diagonal, pembagi banner bersudut, dan kotak foto tim heksagonal menjadi tren desain, didorong oleh alat seperti Webflow dan artikel desain di CSS-Tricks. Portofolio bergaya Awwwards menampilkan trik clip-path dengan menonjol, dan properti berubah dari "keingintahuan CSS yang tidak jelas" menjadi "teknik modern yang diharapkan".
• Internet Explorer mati, 2022.Microsoft pensiun Internet Explorer pada 15 Juni 2022, mengakhiri penghalang browser yang berarti terakhir untuk fitur CSS modern termasuk clip-path. Pada tahun 2023, "mendukung clip-path?" berhenti menjadi perhatian lintas browser yang serius, dan properti menjadi alat default dalam desain hanya CSS.
• Fungsi CSS shape(), 2024 dan seterusnya.CSS Shapes Module terus berkembang dengan proposal seperti shape() (alternatif yang lebih fleksibel untuk path() menggunakan sintaks yang ramah CSS daripada string jalur SVG), memungkinkan bentuk kompleks tanpa peralihan konteks SVG. Dukungan browser sedang diluncurkan melalui 2025 dan 2026.

Alur kerja dunia nyata

• Pemotongan diagonal bagian hero.Pola "hero trapesium" di mana tepi bawah bagian hero dimiringkan secara diagonal daripada horizontal adalah salah satu penggunaan clip-path paling populer. Sebuah sederhana polygon(0 0, 100% 0, 100% 90%, 0 100%) menciptakan kemiringan 10% dari kiri bawah ke kanan atas. Tambahkan bagian kedua di bawahnya dengan kemiringan terbalik dan Anda mendapatkan tata letak "kertas sobek" atau "sudut bertumpuk" yang terasa disengaja tanpa memerlukan gambar apa pun.
• Kotak avatar heksagonal.Halaman tim, daftar kontributor, atau daftar olahraga sering menggunakan pemotongan foto heksagonal untuk alternatif yang lebih dinamis dari avatar bulat. Sebuah clip-path poligon enam-simpul menciptakan heksagon; CSS grid mengatur tata letak sarang lebah yang berundak. Dibandingkan dengan kliping di Photoshop, foto tetap asli dan tidak dimodifikasi: ubah orientasi heksagon atau ganti ke lingkaran dengan satu suntingan CSS.
• Efek pengungkapan gambar saat hover.Menganimasikan clip-path saat hover menciptakan "pengungkapan gambar" di mana bagian yang dipotong berkembang dengan mulus. Pola umum: gambar dimulai sebagai lingkaran kecil dan berkembang ke cakupan penuh saat hover, atau poligon dimulai sebagai garis tipis dan tumbuh menjadi persegi panjang penuh. Transisi CSS pada clip-path interpolasi antara dua poligon dengan jumlah simpul yang sama dengan mulus, menghasilkan animasi 60fps tanpa JavaScript.
• Bentuk tombol khusus.UI permainan, antarmuka futuristik, dan portofolio kreatif sering menggunakan tombol non-persegi panjang (bentuk panah, heksagon, jajaran genjang). clip-path menutupi elemen tombol standar ke bentuk yang dipilih, menjaga tombol yang mendasarinya dapat diakses (masih dapat difokuskan, masih dapat diklik dengan keyboard, masih dapat diumumkan oleh pembaca layar) sambil menyajikan visual khusus.
• Pembagi bagian dekoratif.Pembagi gelombang, pembagi chevron, dan pembagi "halaman sobek" antara bagian halaman dulu memerlukan gambar SVG latar belakang atau gambar per bagian. clip-path menghasilkannya dalam CSS murni menggunakan baik inset dengan sudut bulat atau poligon yang mengikuti gelombang yang diinginkan. Pembagi diskalakan dan merespons perubahan tata letak secara otomatis.
• Galeri foto kreatif.Tata letak galeri foto menggunakan thumbnail persegi panjang seragam terasa generik; memotong setiap thumbnail ke bentuk poligon yang sedikit berbeda menghasilkan perasaan kolase potong tangan tanpa menyembunyikan setiap gambar secara manual. Sebuah set kecil 3 hingga 5 varian poligon yang diputar melalui grid menciptakan ritme visual sambil tetap performant (bentuk yang sama hanya transform-diterapkan ke sumber gambar yang berbeda).

Jebakan umum dan artinya

• clip-path tidak mengubah tata letak.Kejutan umum: mengkliping elemen ke bentuk yang lebih kecil tidak mengurangi ruang yang ditempatinya dalam aliran dokumen. Elemen masih menempati kotak tata letak penuhnya; clip-path hanya mengubah apa yang digambar. Untuk mendapatkan elemen yang secara fisik memakan ruang lebih sedikit, Anda juga perlu mengubah ukurannya. Jika Anda ingin konten yang dipotong benar-benar dipangkas, gunakan overflow: hidden pada pembungkus, atau gunakan CSS mask dengan kotak tata letak yang lebih kecil.
• Ketidaksesuaian rasio aspek merusak koordinat persen.Koordinat poligon yang dinyatakan sebagai persentase diskalakan secara seragam dengan elemen. Bentuk berlian polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) tetap berlian di ukuran apa pun, tetapi menjadi belah ketupat yang lebih lebar atau lebih tinggi jika rasio aspek elemen berubah. Untuk bentuk yang perlu tetap konsisten secara visual di berbagai rasio aspek, gunakan nilai piksel atau perhitungan min(50vw, 50vh), atau batasi rasio aspek elemen dengan properti CSS aspect-ratio.
• Wilayah yang dipotong tidak dapat diklik.Peristiwa pointer hanya mendaftar di mana elemen terlihat setelah pemotongan. Tombol yang dipotong ke segitiga hanya dapat diklik pada segitiga, bukan pada ruang persegi panjang yang tidak terlihat yang ditempatinya. Ini biasanya diinginkan (tidak ada klik tidak sengaja pada ruang kosong), tetapi dapat membingungkan ketika beberapa tombol yang dipotong tumpang tindih atau ketika konten interaktif meluas secara visual di luar wilayah klip.
• Menganimasikan banyak elemen yang dipotong mahal.clip-path memicu komposit pada setiap frame animasi, yang dapat menurunkan frame rate jika diterapkan ke banyak elemen secara bersamaan atau pada elemen besar (bagian hero layar penuh). Untuk animasi 60fps, batasi jumlah elemen yang dipotong yang dianimasikan secara bersamaan, lebih suka bentuk yang lebih sederhana (poligon 4- hingga 6-simpul daripada 20-simpul), dan pertimbangkan menggunakan CSS will-change: clip-path pada elemen yang Anda rencanakan untuk dianimasikan untuk memberi petunjuk kepada browser untuk mengakselerasi mereka dengan GPU.
• Poligon membutuhkan jumlah simpul yang cocok untuk metamorfosis.Menganimasikan clip-path antara dua bentuk poligon hanya berfungsi jika kedua poligon memiliki jumlah simpul yang sama. Pergi dari segitiga (3 titik) ke kotak (4 titik) langsung beralih daripada bermetamorfosis mulus. Untuk metamorfosis halus antara bentuk dengan kompleksitas visual yang berbeda, definisikan kedua poligon dengan jumlah titik yang sama, menempatkan tambahan pada koordinat yang "menyembunyikan" mereka pada salah satu bentuk (misalnya, dua titik di atas satu sama lain).
• Safari membutuhkan prefiks -webkit- untuk sintaks jalur SVG.Bentuk dasar (polygon, circle, ellipse, inset) berfungsi tanpa prefiks di semua browser modern. Tetapi Safari masih memerlukan prefiks -webkit-clip-path saat menggunakan fungsi path() atau merujuk clipPaths SVG url(#id). Untuk kompatibilitas lintas browser, deklarasikan baik -webkit-clip-path dan clip-path dengan nilai yang sama untuk kliping berbasis SVG-path. Auto-prefixer (Autoprefixer, PostCSS) menangani ini secara otomatis di pengaturan build modern.

Privasi: semuanya berjalan di browser Anda

Alat generator CSS secara tradisional terbagi dalam dua kubu: halaman HTML sederhana dengan JavaScript sisi klien (pribadi, cepat, tidak perlu akun) dan editor berfitur lengkap dengan proyek yang disimpan di cloud (kolaboratif, tetapi setiap edit bentuk dicatat di server orang lain). Alat ini berada kuat di kubu pertama. Koordinat poligon yang Anda seret, warna yang Anda pilih, CSS yang Anda salin: semua tetap di sesi browser Anda, tidak pernah dikirim ke mana pun. Refresh halaman dan keadaan hilang kecuali Anda menyalin CSS terlebih dahulu.

Implikasi privasi paling penting untuk pekerjaan kepemilikan. Agensi desain yang membuat prototipe bentuk tombol khusus untuk desain ulang merek rahasia, pengembang indie yang bekerja pada UI permainan yang belum diumumkan, tim perusahaan yang merancang tata letak untuk produk yang masih di bawah NDA: konteks apa pun di mana bentuk itu sendiri atau riwayat iterasinya dapat membocorkan informasi tentang pekerjaan yang sedang berlangsung. Dengan alat ini, tidak ada risiko itu ada karena tidak ada yang ditangkap. Buka tab Jaringan browser saat menyeret gagang dan Anda akan melihat nol permintaan keluar.

Saat alat lain adalah pilihan yang tepat

• Editor SVG untuk jalur kompleks.Untuk kurva tidak teratur, bentuk kaligrafi, atau apa pun di luar fungsi bentuk dasar, menggambar bentuk di Figma, Inkscape, atau Adobe Illustrator dan mengekspor sebagai jalur SVG lebih praktis daripada mengkodekan koordinat clip-path secara manual. Kemudian gunakan clip-path: path('M...') atau merujuk SVG dengan ID. Editor SVG menyediakan gagang bezier dan presisi; generator clip-path tidak.
• CSS mask untuk alpha blending dan gradien.clip-path menghasilkan alpha biner (terlihat sepenuhnya atau dipotong sepenuhnya). Untuk bentuk bertepi lembut (gradien memudar, kurva anti-alias, transparansi parsial), CSS mask atau mask-image menangani gradien alpha penuh. mask mendukung gambar masker (PNG, SVG, atau gradien apa pun) di mana piksel hitam menyembunyikan dan piksel putih menunjukkan, dengan abu-abu memberikan opasitas parsial. clip-path tidak dapat melakukan itu.
• Pemrosesan gambar untuk pemotongan permanen.Jika Anda ingin file gambar akhir itu sendiri dipotong ke bentuk (ukuran file lebih kecil, tanpa overhead clip-path, tanpa risiko fallback yang tidak dipotong), lakukan pemotongan di editor gambar atau alat Image Compressor kami. clip-path adalah untuk masking waktu tampilan pada elemen HTML; jika targetnya adalah aset gambar statis, potong file langsung.
• Figma atau Sketch untuk mockup desain.Saat prototyping tata letak, alat vektor Figma menangani eksplorasi bentuk kompleks lebih cepat daripada menyeret gagang clip-path. Gunakan alat desain untuk menemukan bentuk yang Anda inginkan, kemudian terjemahkan bentuk akhir menjadi CSS clip-path untuk produksi. Alat desain juga menangani iterasi, riwayat undo, dan komentar tim lebih baik daripada generator CSS waktu nyata.

Pertanyaan lain yang sering ditanyakan

Bisakah saya menggunakan persentase atau piksel untuk koordinat simpul?

Keduanya berfungsi. Persentase diskalakan dengan kotak elemen, sehingga poligon yang didefinisikan dalam persentase mempertahankan bentuk proporsionalnya saat elemen diubah ukurannya. Piksel adalah mutlak, sehingga poligon dengan koordinat piksel mempertahankan ukuran yang sama terlepas dari elemen. Gunakan persentase untuk bentuk yang harus diubah ukurannya dengan tata letak (sebagian besar kasus) dan piksel untuk bentuk yang memerlukan posisi piksel yang tepat (misalnya, menyelaraskan dengan elemen desain tertentu). Anda juga dapat mencampur: polygon(50% 10px, 100% 50%, ...) valid.

Akankah clip-path mempengaruhi SEO atau pembaca layar?

Tidak. clip-path adalah properti hanya visual. HTML yang mendasarinya sepenuhnya dapat diakses: teks di dalam elemen yang dipotong masih diindeks oleh mesin pencari, masih diumumkan oleh pembaca layar, masih dapat dipilih dengan navigasi keyboard. Gunakan clip-path untuk styling visual; jangan menggunakannya sebagai cara untuk menyembunyikan konten secara semantik (yang memerlukan display: none atau atribut aria-hidden). Konten yang dipotong secara visual tetap hadir dalam pohon aksesibilitas.

Bagaimana saya membuat clip-path responsif?

Gunakan persentase alih-alih piksel, dan periksa hasilnya di breakpoint yang berbeda. Untuk bentuk yang membutuhkan proporsi berbeda di mobile versus desktop, gunakan media queries CSS untuk menukar nilai clip-path: deklarasikan clip-path yang berbeda di dalam @media (max-width: 768px) untuk bentuk mobile. Untuk kebutuhan responsif kompleks (misalnya, poligon yang menjadi lingkaran di mobile), pertimbangkan menggunakan JavaScript untuk menghitung ulang clip-path berdasarkan ukuran jendela, meskipun pendekatan CSS murni menangani sebagian besar kasus.

Bisakah clip-path diterapkan pada video dan iframe?

Ya. clip-path berfungsi pada elemen HTML apa pun, termasuk dan