Generator Clip Path CSS

Lima fungsi bentuk

Potongan poligon umum

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / panah menunjuk ke kanan */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Potongan diagonal (hero section modern) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Diagonal hero-section mungkin yang paling banyak dipakai dari semuanya, ia memberi tampilan section bermiring modern tanpa SVG apa pun.

Menganimasikan clip-path

Clip-path menganimasi selama kedua state punya fungsi bentuk sama dengan jumlah titik sama. Poligon 4-vertex menganimasi mulus ke poligon 4-vertex lain; menambah atau menghapus vertex merusak interpolasi.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Gunakan ini untuk efek reveal, distorsi hover halus, atau transisi halaman.

Clip-path vs. overflow: hidden

overflow: hidden memotong ke persegi panjang border-box (yang bisa dibulatkan dengan border-radius). clip-path memotong ke bentuk apa pun yang Anda definisikan dan memotong segalanya, termasuk bayangan dan outline. Jika Anda butuh bayangan tetap terlihat di luar bentuk, clip-path bukan yang Anda inginkan.

filter: drop-shadow() bisa menambahkan kembali bayangan yang mengikuti bentuk pada elemen clip-path, tetapi lebih lambat.

Performa

Clip-path diakselerasi GPU di browser modern, jadi clip-path beranimasi mulus. Pengecualiannya adalah path() dan poligon sangat kompleks (40+ vertex) yang jatuh ke rendering CPU di beberapa browser.

Aksesibilitas

Clip-path hanya mengubah apa yang terlihat. Screen reader, fokus keyboard, dan event pointer mengikuti box penuh elemen, bukan bentuk yang dipotong. Jika sebuah gambar dipotong menjadi bintang, teks alt dibaca normal. Jika sebuah tombol dipotong menjadi chevron, target klik-nya adalah persegi panjang penuh, bukan chevron yang terlihat, yang bisa menyebabkan klik tak sengaja pada ruang yang tampak kosong.

Untuk tombol dengan bentuk potongan tidak biasa, atur lebar/tinggi elemen ketat agar hitbox cukup cocok dengan area yang terlihat.