Clip Path Üretici

Bu araç ne işe yarar?

CSS clip-path Oluşturucu, üçgen, altıgen, yıldız, ok ve daire gibi hazır şekilleri seçip ilgili clip-path CSS kodunu anında üreten bir araçtır. Web geliştiricileri ve tasarımcılar, görselleri ve kutuları kırpmak için kod yazmadan kullanabilir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır

Üstteki ızgaradan bir şekil seçtiğinizde, ortadaki önizleme kutusu gradyan dolgulu olarak o şekle kırpılır ve altta tam CSS satırı görünür: örneğin clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bir üçgen verir. Kopyala düğmesiyle kodu alıp herhangi bir öğenin stiline yapıştırabilirsiniz. Üçgen, yamuk, paralelkenar, eşkenar dörtgen, beşgen, altıgen, yıldız, ok, şerit, daire, elips ve konuşma balonu şekilleri hazırdır.

Nerede kullanılır

Kahraman bölümlerinde eğik kenarlar, altıgen avatar ızgaraları, ok biçimli adım göstergeleri veya yıldız rozetleri oluşturmak için idealdir. polygon() yüzde tabanlı olduğundan kırpma, öğe yeniden boyutlandığında orantılı kalır ve duyarlı tasarımlarla uyumludur. circle() ve ellipse() ise resimleri maske kullanmadan yuvarlatmak için pratiktir. Üretilen kod saf CSS olduğundan herhangi bir framework veya statik sayfada çalışır.

Sıkça sorulan sorular

Üretilen şekli özelleştirebilir miyim?

Araç hazır şekiller sunar; kopyaladıktan sonra polygon() içindeki yüzde değerlerini elle değiştirerek köşeleri istediğiniz gibi kaydırabilirsiniz.

clip-path tüm tarayıcılarda çalışır mı?

polygon, circle ve ellipse değerleri tüm modern tarayıcılarda desteklenir; çok eski tarayıcılar için yedek bir görünüm tanımlamanız önerilir.

Kırpılan alan tıklamaları engeller mi?

clip-path öğenin yalnızca görünür kısmını sınırlar ve görünmeyen bölge tıklama alanı dışında kalır, bu yüzden etkileşim de kırpılan şekle uyar.