CSS Visual ToolsLesson 80Preview gratis
Clip Path Generator
Lesson ini bagian dari Web Developer Tools · Semua level
Ringkasan
Clip path generator membantu memotong elemen menjadi bentuk tertentu seperti lingkaran, elips, poligon, atau persegi membulat. Kamu dapat mengatur koordinat dan melihat area mana yang tetap terlihat. Teknik ini berguna untuk avatar, header miring, dan elemen dekoratif tanpa membuat gambar tambahan.
Poin kunci
- clip-path menentukan area elemen yang tetap terlihat
- circle() dan ellipse() membuat potongan bulat
- polygon() menerima pasangan koordinat x dan y
- inset() memotong elemen dari setiap sisi
- Bagian di luar bentuk tetap ada di DOM tetapi tidak terlihat
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.