CSS Clip-Path Kırpma Yolu Oluşturucu

CSS clip-path kırpma yolu kodunu görsel olarak oluşturur; çokgen, daire, elips gibi şekilleri destekler ve görselleri toplu olarak işleyebilir.

Hata bildirimi

Tarayıcı yürütme modu: Verileriniz tarayıcınızda işlenir ve sunucuya yüklenmez.

Hız ve kararlılık: İşleme hızı cihazınıza ve tarayıcınıza bağlıdır. Büyük toplu işler için masaüstü sürümü daha kararlı olabilir.

Araç yükleniyor, lütfen bekleyin...

Çevrimiçi araç yüklenmez veya çalışmazsa masaüstü aracını deneyin. https://tools.yikeaigc.com/

Araç Kullanımı

Eski sürüme dön

Önce kırpma yolunu ayarlayın, sonra kodu kopyalayın veya görselleri toplu işleyin

Hazır şekil seçtikten sonra çokgen kontrol noktalarını sürükleyebilir veya daire, elips, içe gömülü dikdörtgene geçip parametreleri ayarlayabilirsiniz. Toplu işlem geçerli yolu kullanır; çoklu görsel yüklemede yalnızca ilk 20'si gösterilir, ancak tümü işlenir.

Geçerli yol bilgisi

Türpolygon

Kontrol noktaları3

İpucu: Önce yol ayarını tamamlayın, sonra kodu kopyalayın veya görselleri işleyin.

Canlı önizleme Çokgen modunda mavi kontrol noktalarını sürükleyebilirsiniz; koordinatlar CSS ile eşzamanlı oluşturulur.

Koordinatlar: Öğenin kendisine göredir; sol üst köşe 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Şekil ve hazır ayarlar Önce türü seçin, sonra parametreleri ayarlayın

Şekil türü

Hazır kategoriler

Yol parametreleri Değerler yüzdeyi destekler

Koordinat metni

Yarıçap

Merkez X

Merkez Y

Yatay yarıçap

Dikey yarıçap

Merkez X

Merkez Y

üst

Sağ

alt

Sol

Köşe yuvarlama

Önizleme ve çıktı Arka plan yalnızca önizleme ve görsel dışa aktarmayı etkiler

Önizleme genişliği (px)

Önizleme yüksekliği (px)

Renk A

Renk B

Gradyan açısı

Görsel önizleme

Öğe sınırlarını göster -webkit önekini ekle Sınıf seçici oluştur

Kod oluştur

Kod, ayarlarla gerçek zamanlı güncellenir.

Geçerli yolu toplu uygula Önce önceki adımda yolu ayarlayın, sonra görsel işlemeyi seçin.

Tıklayın veya görsel sürükleyin JPG, PNG, WebP, GIF, BMP vb. yaygın formatları destekler

Henüz resim seçilmedi.

Çıkış ayarları PNG şeffaf arka planı destekler

Çıkış biçimi

Boyut modu

Uzun kenar sınırı (px)

Özel genişlik (px)

Özel yükseklik (px)

Çıktı kalitesi92%

Kırpma dışı şeffaf Geçerli yolu kullan

İşlem bekleniyor.

Görsel önizleme ve sonuç Yüklemeden sonra ilk 20 görsel gösterilir; işlemde tüm dosyalar dahil edilir.

İşlenecek görseller0 görsel

Küçük resimleri görmek için görsel seçin.

İşlem sonucu0 görsel

İşlem bitince sonuç küçük resimleri gösterilir.

Talimatlar

Yazılım Kullanım Talimatları

Kırpma yolunu tasarlayın: Araca girdikten sonra “Yol Tasarla” adımında şekil türünü seçin; çokgen, daire, elips veya içe gömülü dikdörtgen kullanabilirsiniz.
Hazır şekil seçin: Temel şekiller, oklar ve simgeler ile dekoratif şekiller arasından bir hazır şekil seçebilir, ardından parametreleri ihtiyacınıza göre ayarlayabilirsiniz.
Yol parametrelerini düzenleyin: Çokgenlerde kontrol noktalarını sürükleyebilir veya koordinat metin kutusuna yüzde koordinatları girebilirsiniz; daire, elips ve içe gömülü dikdörtgenlerde yarıçap, merkez noktası, kenar boşluğu ve köşe yuvarlaklığını doğrudan doldurabilirsiniz.
Önizleme efektini ayarlayın: Önizleme genişliği ve yüksekliğini, gradyan renklerini ve gradyan açısını ayarlayabilir; önizleme içeriği olarak bir görsel de seçebilirsiniz.
CSS kodunu kopyalayın: Efekti onayladıktan sonra “clip-path kopyala” veya “CSS kopyala” düğmesine tıklayın; -webkit öneki ve sınıf seçicinin dahil edilip edilmeyeceğini seçebilirsiniz.
Görselleri toplu işleyin: “Sonraki adım: Toplu işleme” düğmesine tıklayın, birden fazla görsel seçin, çıktı formatını, kaliteyi ve boyut modunu ayarladıktan sonra işlemeyi başlatın.
Sonuçları indirin: İşlem tamamlandıktan sonra “Tüm sonuçları ZIP olarak indir” düğmesine tıklayın; çıktı dosyaları mümkün olduğunca orijinal dosya adlarını kullanır, aynı adla karşılaşıldığında ayırt etmek için otomatik olarak sayı eklenir.

Sıkça Sorulan Sorular

Cevap: clip-path, öğeleri belirtilen şekle göre kırpmak için kullanılır; genellikle görselleri farklı şekillerde göstermek, kart kenarı tasarımları, düğme şekilleri, web sayfası dekoratif grafikleri ve etkileşimli animasyonlar için kullanılır.

Cevap: polygon, birden fazla koordinat noktasıyla çokgen oluşturur; circle dairesel kırpma alanı oluşturur; ellipse eliptik kırpma alanı oluşturur; inset içe gömülü dikdörtgen oluşturur ve köşe yuvarlaklığı parametresini destekler.

Cevap: Koordinatlar yüzde ile ifade edilir; örneğin 50% 0% öğenin üst orta konumunu, 100% 100% sağ alt köşeyi temsil eder. Her nokta virgülle ayrılır ve en az 3 nokta gerekir.

Cevap: -webkit-clip-path, bazı WebKit çekirdeği ortamlarıyla uyumluluk için kullanılır. Uyumluluk kapsamını artırmak için hem önekli hem de standart yazım birlikte korunabilir.

Cevap: Girdi olarak yaygın görsel formatları seçilebilir; çıktı olarak PNG, JPEG ve WebP desteklenir. PNG şeffaf alanları korumak için uygundur, JPEG daha küçük dosyalar oluşturmak için uygundur, WebP ise dosya boyutu ve görüntü kalitesi arasında denge sağlamak için uygundur.

Cevap: Araç, mümkün olduğunca orijinal dosya adını kullanır ve çıktı formatına göre uzantıyı değiştirir. Aynı ada sahip dosyalar varsa sonuçların birbirinin üzerine yazılmasını önlemek için dosya adının sonuna sayı eklenir.