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.
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.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 91 | 54 | Hayır | 88 | TP * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 * |
