Klip yolu - CSS Hileleri | CSS Almanak 2025

CSS'deki clip-pathözellik, bir öğenin belirli bir bölgesini, geri kalanı gizlenerek (veya "kırpılarak") görüntülenecek şekilde belirtmenize olanak tanır.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Eskiden bir clipmülk vardı, ancak bunun kullanımdan kaldırıldığını unutmayın.

En yaygın kullanım durumu bir resim olabilir, ancak bununla sınırlı değildir. clip-pathBir paragraf etiketine ve metnin yalnızca bir kısmına kolayca uygulayabilirsiniz .

 
 I'll be clipped.

inset()(Yukarıdaki CSS'de) içindeki bu dört değer , görünür dikdörtgeni oluşturan üst / sol noktayı ve alt / sağ noktayı temsil eder . Bu dikdörtgenin dışındaki her şey gizlidir.

Louis Lazaris'in bu görüntüsü, **eski `clip: rect();`söz diziminin** dört noktasını çok iyi açıklıyor .

Diğer olası değerler:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Örnek SVG klip yolu:

Gibi özellikler için zaten bir şey olduğundan , kapıdan çıkış işlevini clip-pathdesteklememesi çok garip . Firefox'un şu an için desteği var ve tarayıcıların geri kalanını bekliyoruz. Clip-yolunun İlk Uygulaması'na bakın: path ();path()path()motion-path

Kendin Yap

Güvenilir bir şekilde kullanana kadar path(), süslü özel şekiller için en kullanışlı klipler polygon(). İşte Mads Stoumann'dan olanlar için gerçekten düzgün bir editör (aynı zamanda daireler ve elipsler için de çalışıyor):

Daha fazla bilgi

CSS'de Kırpma ve Maskeleme
WPD'de klip yolu
MDN'de klip yolu
Clippy: Bennett Feely'nin klip-yol yapımcısı
MDN'de kırpma ve maskeleme
(Kullanımdan kaldırılmış) CSS Klip Özelliği (Etkileyici Web'ler)
CSS Maskeleme Özelliği
Dirk Schulze tarafından CSS Maskeleme
CSS ve SVG'de Kırpma - Klip yolu Özelliği ve Öğesi Sara Soueidan tarafından
CodePen'de klipsli kalemler etiketli
Demolar ve tarayıcı desteği Demo Pen by Yoksel
Jakob Jenkov tarafından SVG Maskeleri
Alan Greenblatt'ın kırpma ve maskeleme özellikleri için tarayıcı destek düzeyleri üzerine araştırması

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.