Question 1

Apa itu CSS clip-path?

Accepted Answer

Properti CSS clip-path memotong elemen ke bentuk tertentu, menyembunyikan konten di luar area yang didefinisikan. Mendukung bentuk seperti circle, ellipse, polygon, inset, dan path, memungkinkan efek visual kreatif tanpa elemen tambahan.

Question 2

Apakah semua browser mendukung clip-path?

Accepted Answer

Ya. clip-path didukung dengan baik di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge. Untuk browser lama, prefiks -webkit- mungkin diperlukan untuk beberapa bentuk, tetapi cakupan untuk nilai polygon dan inset sangat bagus.

Question 3

Apa fungsi polygon() dalam clip-path?

Accepted Answer

Fungsi polygon() mendefinisikan bentuk kustom dengan menentukan daftar pasangan koordinat (x y). Setiap pasangan mewakili verteks poligon. Koordinat menggunakan persentase (relatif terhadap elemen) atau panjang absolut.

Question 4

Bisakah saya menganimasikan bentuk clip-path?

Accepted Answer

Bisa! Anda dapat menganimasikan antara dua bentuk clip-path yang memiliki jumlah titik yang sama menggunakan transisi atau animasi CSS. Misalnya, menganimasikan dari inset persegi panjang ke lingkaran menciptakan efek morphing yang halus.

Question 5

Apa perbedaan antara clip-path dan mask?

Accepted Answer

clip-path menggunakan bentuk geometris untuk memotong elemen dengan tepi yang keras. CSS mask menggunakan gambar (termasuk gradien) sebagai alpha mask, mendukung tepi lembut dan transparansi kompleks. clip-path lebih sederhana dan lebih performan untuk bentuk geometris.

Generator CSS Clip-Path

Pertanyaan yang Sering Diajukan

Comments & Feedback