Question 1

Apa itu CSS clip-path?

Accepted Answer

CSS clip-path adalah properti yang mendefinisikan wilayah klip untuk suatu elemen. Hanya konten di dalam bentuk yang ditentukan yang terlihat, sementara sisanya tersembunyi. Ini digunakan untuk membuat bentuk non-persegi panjang untuk elemen seperti gambar, div, dan tombol tanpa memerlukan SVG atau markup tambahan.

Question 2

Bentuk apa yang bisa saya buat dengan clip-path?

Accepted Answer

CSS clip-path mendukung polygon (bentuk multi-titik kustom), circle, ellipse, dan inset (persegi panjang dengan sudut bulat opsional). Jenis polygon paling fleksibel, memungkinkan segitiga, berlian, heksagon, panah, dan hampir semua bentuk yang ditentukan oleh serangkaian titik persentase.

Question 3

Bagaimana nilai persentase bekerja di clip-path?

Accepted Answer

Nilai persentase dalam clip-path relatif terhadap dimensi elemen itu sendiri. 0% 0% adalah sudut kiri atas, 100% 0% adalah kanan atas, 50% 50% adalah tengah, dan 100% 100% adalah kanan bawah. Ini membuat bentuk clip-path responsif terhadap ukuran elemen.

Question 4

Apakah clip-path mempengaruhi tata letak elemen?

Accepted Answer

Tidak, clip-path hanya mempengaruhi apa yang terlihat — tidak mengubah model kotak atau tata letak elemen. Elemen masih menempati ruang aslinya. Jika Anda perlu mengubah tata letak bersamaan dengan pemotongan, pertimbangkan menggunakan shape-outside dengan float untuk efek pembungkusan teks.

Question 5

Bagaimana cara menganimasikan clip-path?

Accepted Answer

clip-path dapat dianimasikan menggunakan transisi CSS atau animasi keyframe antara dua bentuk yang kompatibel (misalnya, polygon dengan jumlah titik yang sama). Tambahkan transition: clip-path 0.3s ease untuk mengaktifkan morfing bentuk yang mulus saat hover atau perubahan status.

Generator CSS Clip-Path

Pertanyaan yang Sering Diajukan

Comments & Feedback