CSS clip-path 属性

Definisi dan penggunaan

Atribut clip-path memungkinkan Anda memotong elemen ke bentuk dasar atau sumber SVG.

Komentar:clip-path akan menggantikan atribut clip yang sudah usang.

Contoh

Potong gambar menjadi bulatan 50%:

img {
  clip-path: circle(50%);
}

Coba sendiri

Syarat CSS

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Nilai atribut

Nilai Deskripsi
clip-source Tentukan URL mengarah ke elemen SVG <clipPath>.
basic-shape Potong elemen ke bentuk dasar: bulatan, ellips, poligon atau bintang.
margin-box Gunakan kotak margin sebagai kotak referensi.
border-box Gunakan kotak border sebagai kotak referensi.
padding-box Gunakan kotak padding sebagai kotak referensi.
content-box Gunakan kotak konten (content box) sebagai kotak referensi.
fill-box Gunakan kotak batas objek (object bounding box) sebagai kotak referensi.
stroke-box Gunakan kotak batas pengecor (stroke bounding box) sebagai kotak referensi.
view-box Gunakan viewport SVG sebagai kotak referensi.
none Nilai lalai. Tidak mencipta jalur potong.

Detil teknologi

Nilai lalai: none
Mewarisi: Tidak
Pembuatan animasi: Dukung (hanya untuk nilai basic-shape). Lihat:Atribut berhubungan dengan animasi.
Versi: Modul Masking CSS Level 1
Syarat Bahasa JavaScript: object.style.clipPath="circle(50%)"

Dukungan pereksi

Angka di dalam tabel menunjukkan versi pereksi pertama yang mendukung sifat ini sepenuhnya.

Chrome IE / Edge Firefox Safari Opera
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge hanya menyokong clip-path untuk elemen SVG (tidak mendukung elemen HTML).