CSS clip-path özelliği

Tanım ve kullanım

clip-path özelliği, elementleri temel şekil veya SVG kaynağına kesmek için kullanabilirsiniz.

Yorum:clip-path, terkedilen clip özelliğini değiştirecektir.

Örnek

Görseli %50'lik bir daireye kesin:

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
clip-source SVG <clipPath> elementine yönlendiren URL'yi tanımlayın.
basic-shape Elementi temel şekle (daire, elips, çokgen veya yıldız) kesin.
margin-box Marj çubuğu olarak referans çubuğu kullanın.
border-box Sınırlayıcı çubuğu olarak referans çubuğu kullanın.
padding-box Dolgu çubuğu olarak referans çubuğu kullanın.
content-box İçerik çubuğu olarak referans çubuğu kullanın.
fill-box Nesne sınırlayıcı çubuğu (object bounding box) olarak referans çubuğu kullanın.
stroke-box Dizgı sınırlayıcı çubuğu (stroke bounding box) olarak referans çubuğu kullanın.
view-box SVG görüş alanını referans çubuğu olarak kullanın.
none Varsayılan değer. Kesim yolunu oluşturmaz.

Teknik ayrıntılar

Varsayılan değer: none
Devralma: Hayır
Animasyon yapımı: Destek (sadece basic-shape değeri için). Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Masking Module Level 1
JavaScript dilbilgisi: object.style.clipPath="circle(50%)"

Tarayıcı desteği

Tablo içindeki sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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 sadece SVG elementleri (HTML elementlerini desteklememektedir) üzerinde clip-path'i destekler.