Elemen di web selalu berbentuk kotak. clip-path memotong tampilan kotak itu jadi bentuk lain: segitiga, belah ketupat, lingkaran. Bagian di luar bentuk jadi gak kelihatan, kayak kertas yang digunting mengikuti pola.
🧪 Tebakan cepat: kotak dipotong jadi lingkaran, lalu kamu klik pojoknya yang sudah hilang. Klik itu kena kotaknya atau gak? Tebak dulu, jawabannya ada di bagian "Yang dipotong cuma tampilannya".
Potong jadi segitiga dengan polygon()
.segitiga {
width: 200px;
height: 200px;
background: coral;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
clip-path:adalah properti yang memotong.polygon(...)adalah fungsi buat bentuk bebas. Kamu kasih titik-titik pojoknya, browser menyambungnya jadi garis, lalu titik terakhir disambung balik ke titik pertama.- Tiap titik ditulis
x y, dipisah spasi.xjaraknya dari kiri,yjaraknya dari atas, dalam persen ukuran kotak. - Antar titik dipisah koma. Di sini ada tiga titik:
50% 0%(tengah atas),100% 100%(pojok kanan bawah),0% 100%(pojok kiri bawah).
Hasilnya segitiga coral dengan puncak di tengah atas. Patokannya: 0% 0% pojok kiri atas, 100% 0% pojok kanan atas, 50% 50% titik tengah kotak.
Belah ketupat: empat titik di tengah sisi
Belah ketupat punya empat pojok, masing-masing di tengah satu sisi kotak. Urutkan keliling searah jarum jam:
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Tengah atas 50% 0%, tengah kanan 100% 50%, tengah bawah 50% 100%, tengah kiri 0% 50%. Urutan itu penting: titik yang loncat-loncat bikin garisnya menyilang.
Lingkaran, elips, dan inset()
Buat bentuk bulat dan kotak terpotong, ada fungsi siap pakai:
clip-path: circle(50%);bikin lingkaran. Angkanya jari-jari. Di kotak persegi,circle(50%)pas menyentuh keempat sisi, jadi pojok-pojoknya terpotong. Makin besar angkanya, makin besar lingkarannya.clip-path: circle(50% at center);sama, dengan pusat ditulis jelas.atmenentukan letak pusatnya, bawaannya di tengah.clip-path: ellipse(40% 60% at center);bikin elips (oval). Angka pertama jari-jari mendatar, angka kedua jari-jari tegak.clip-path: inset(10px 20px round 8px);memotong ke dalam dari tepi kotak, urutannya kayakmargin(atas dulu, lalu searah jarum jam).roundbikin pojoknya membulat.
Yang dipotong cuma tampilannya
Elemen yang dipotong tetap makan tempat seukuran kotak aslinya, jadi elemen lain gak geser. Bedanya di klik dan hover: bagian yang terpotong gak bisa diklik atau di-hover. Jawaban tebakan: klik di pojok yang hilang gak kena kotaknya.
⚠️ Jebakan yang sering ketemu
- Titik tanpa koma.
polygon(50% 0% 100% 100% 0% 100%)gak valid, jadi seluruh baris diabaikan dan kotaknya tetap utuh. Spasi di antaraxdany, koma di antara titik. - Bayangan ikut terpotong.
box-shadowdanborderyang ada di luar bentuk ikut hilang. Kalau butuh bayangan, kasihfilter: drop-shadow(...)ke elemen pembungkusnya. - Lupa ukuran. Persen di
polygon()dihitung dari ukuran elemen. Elemen tanpa isi dan tanpawidthatauheightbisa setinggi 0, jadi gak ada yang kelihatan.
TL;DR: clip-path memotong tampilan elemen jadi bentuk lain. polygon() buat bentuk bebas dari titik x y (persen dari kiri dan dari atas), titik dipisah koma, urut keliling. circle() buat lingkaran, ellipse() buat oval, inset() buat kotak yang dipotong dari tepi. Elemennya tetap makan tempat yang sama, tapi bagian yang terpotong gak bisa diklik.
