Properti clip-path CSS

Definisi dan penggunaan

Atribut clip-path memungkinkan Anda mengepotong elemen menjadi bentuk dasar atau sumber SVG.

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

Potong gambar menjadi lingkaran 50%:

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

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

Nilai	Deskripsi
clip-source	Tentukan URL mengarah ke elemen SVG <clipPath>.
basic-shape	Potong elemen menjadi bentuk dasar: lingkaran, 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 garis (stroke bounding box) sebagai kotak referensi.
view-box	Gunakan viewport SVG sebagai kotak referensi.
none	Nilai default. Tidak membuat jalur potong.

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

Angka di tabel menunjukkan versi peramban pertama yang mendukung atribut ini penuh.

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 mendukung clip-path di elemen SVG (tidak mendukung elemen HTML).