CSS clip-path Üretici

CSS clip-path Oluşturucu, CSS clip-path özellikleri oluşturmak ve test etmek için görsel bir araçtır. Clip-path, öğeleri temel şekillere (daire, elips, çokgen) veya bir SVG yoluna kırpmanızı sağlar. Bu araç, web projeleriniz için özel şekiller tasarlamanıza yardımcı olmak için gerçek zamanlı önizleme ve kod oluşturma sağlar.

Hazır şekiller panelinde herhangi bir hazır şekil düğmesine tıklayarak anında uygulayın. Araç 12 yerleşik şekil içerir: Üçgen, Trapez, Paralelkenar, Beşgen, Altıgen, Yedigen, Sekizgen, Yıldız, Daire, Elips, İçe Çerçeve ve Yuvarlatılmış İçe. Önizleme, şeklin öğeyi nasıl kıptığını göstermek için hemen güncellenir.

Özel Yol giriş alanına herhangi bir geçerli clip-path değerini girin. Tüm clip-path işlevlerini destekler: polygon(), circle(), ellipse(), inset() ve path(). Araç, maksimum tarayıcı uyumluluğu için standart ve -webkit- öneki ile oluşturulan CSS kodunu görüntüler. Kodu panonuza kopyalamak için Kopyala düğmesine tıklayın.

Çokgen Oluşturucu, özel çokgen şekilleri oluşturmak için görsel bir arayüz sağlar. Her nokta X ve Y koordinatları (0-100%) ile tanımlanır. Karmaşık çokgenler oluşturmak için daha fazla nokta ekleyin (minimum 3) veya basitleştirmek için noktaları çıkarın. Oluşturucu, koordinatları ayarladıkça otomatik olarak geçerli CSS polygon() sözdizimi oluşturur.

Boyut kaydırıcısını (100-400px) ayarlayarak ve Renk seçiciyi kullanarak öğe arka plan rengini değiştirerek önizlemeyi özelleştirin. Bu ayarlar, clip-path'in tasarımınızda farklı öğe boyutları ve renklerle nasıl görüneceğini görselleştirmenize yardımcı olur.

CSS clip-path tüm modern tarayıcılarda desteklenir. Araç, Safari uyumluluğu için otomatik olarak -webkit-clip-path içerir. path() işlevi ile clip-path'in eski tarayıcılarda sınırlı desteği vardır. Production'a dağıtmadan önce hedef tarayıcıları her zaman test edin.