clip-path memotong elemen menjadi bentuk tertentu — bagian di luar bentuk menjadi tidak terlihat.

Bentuk dasar:

circle() — lingkaran:

.lingkaran {
  clip-path: circle(50% at center);
}

ellipse() — elips:

.elips {
  clip-path: ellipse(40% 60% at center);
}

inset() — kotak dengan jarak dari tepi:

.inset {
  clip-path: inset(10px 20px 30px 40px round 5px);
}

polygon() — bentuk custom menggunakan titik koordinat:

/* Segitiga */
.segitiga {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Belah ketupat (diamond) */
.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Bintang */
.bintang {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Tips:

• Gunakan tool online seperti Clippy untuk membuat polygon visual
• clip-path bisa dianimasikan dengan transition!
• Koordinat polygon dalam format x% y%

🎭 Analogi sehari-hari

Pernah pas SD pake gunting motong kertas pake template bentuk — bintang, hati, awan? Bagian dalam template kepotong rapi sesuai bentuk, sisa kertas jatoh. clip-path di CSS persis sama: kasih bentuk (lingkaran, segitiga, polygon custom), bagian luar bentuk "ilang" dari pandangan. Elemen masih ada di DOM dan tetep nyita ruang — cuma yang KELIHATAN aja yang dipotong sesuai bentuk.

⚠️ Jebakan yang sering ditemui

• Klik area mengikuti CLIP — area di luar clip tidak clickable. Bagus untuk hit-test, kadang surprise.
• Polygon perlu URUTAN searah jam atau berlawanan — kalau random, hasilnya weird.
• Animation polygon harus jumlah point SAMA — polygon(0 0, 100% 0) ke polygon(0 0, 100% 0, 50% 100%) tidak smooth.
• clip-path performance better than mask — GPU optimized.
• Tool: bandwidth.com/clippy untuk visual builder polygon.
• Browser support modern kecuali IE.

TL;DR: clip-path = potong elemen jadi bentuk tertentu (luar bentuk invisible). Bentuk dasar: circle(), ellipse(), inset(), polygon() (custom dengan koordinat x% y%). Bisa dianimasikan via transition — tapi animation polygon WAJIB jumlah point sama. Klik area ikut clip (luar gak clickable). GPU optimized — lebih cepat dari mask. Pakai tool visual bennettfeely.com/clippy buat bikin polygon kompleks.