CSS Clip-path Oluşturucu
CSS Clip-path Generator, yaygın şekiller — üçgen, ok, beşgen, altıgen, yıldız, şerit (chevron), daire, elips ve yuvarlatılmış inset — için canlı önizlemeli clip-path değerleri üretir.
Bu araç hakkında
CSS Clip-path Generator, yaygın şekiller — üçgen, ok, beşgen, altıgen, yıldız, şerit (chevron), daire, elips ve yuvarlatılmış inset — için canlı önizlemeli clip-path değerleri üretir.
Nasıl kullanılır
- Listeden bir şekil seçin.
- Önizleme için bir dolgu rengi seçin.
- Copy CSS'e tıklayın ve clip-path'i herhangi bir öğeye veya görsele uygulayın.
Bilmekte fayda var
- clip-path bir şeklin dışında kalan her şeyi gizler; görsel maske veya SVG dosyası gerekmez.
- polygon(), öğeyle birlikte ölçeklenen yüzde cinsinden x y noktalarından oluşan bir liste alır.
- circle(50% at 50% 50%) bir öğeyi ortalanmış bir daireye kırpar.
- round ile birlikte inset(), dikdörtgen bir kırpmaya yuvarlatılmış köşeler ekler.
- clip-path temel şekilleri güncel tüm büyük tarayıcılarda desteklenir.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS ile bir görseli nasıl şekle göre keserim?
Görsele bir clip-path uygulayın; örneğin üçgen için clip-path: polygon(50% 0%, 0% 100%, 100% 100%);.
clip-path ile mask arasındaki fark nedir?
clip-path keskin kenarlı bir vektör şekil keser. mask ise bir görsel veya gradyan kullanır ve yumuşak, kısmen şeffaf kenarlar oluşturabilir.
clip-path animasyonlu olabilir mi?
Evet; iki şekil de aynı fonksiyonu ve aynı sayıda noktayı kullanıyorsa tarayıcı aralarında geçiş yapabilir.
clip-path tıklamaları etkiler mi?
Evet. Kırpılan şeklin dışındaki alanlar çizilmez ve işaretçi olaylarını almaz.