CSS clip-path Oluşturucu

CSS clip-path Oluşturucu nedir?

CSS clip-path Oluşturucu, öğeleri dikdörtgen olmayan şekillere kırpmak isteyen ön uç geliştiriciler ve tasarımcılar için yapılmış, CSS clip-path özelliğine yönelik ücretsiz bir görsel düzenleyicidir. Açılır menüden bir ön ayar seçin — yarıçap ve merkez noktası olan circle() ve ellipse(), ihtiyacınız olduğu kadar köşe noktası olan polygon(), dört kenar ofseti olan inset() veya köşe yarıçapı olan yuvarlatılmış bir inset() çeşidi. Her parametre, bir sayı girişiyle girilen bir yüzdedir ve dama tahtası arka planlı bir önizleme kutusu ortaya çıkan şekli gerçek zamanlı olarak gösterir. Tam clip-path CSS'i kopyalamanız için üretilir. Görüntüleri maskelemek, çapraz bölüm ayırıcıları kesmek, altıgen avatarlar oluşturmak veya koordinatları elle saymadan konuşma balonu şekilleri oymak için kullanın.

CSS clip-path Oluşturucu nasıl kullanılır

1. Ön ayar açılır menüsünden bir şekil seçin: daire, elips, çokgen, inset veya yuvarlatılmış.
2. Daire veya elips için yarıçapı (ya da X/Y yarıçaplarını) ve merkez X/Y konumunu yüzde olarak ayarlayın.
3. Çokgen için her köşe noktasının X ve Y yüzdesini düzenleyin; daha fazla köşe noktası eklemek için Nokta ekle'ye tıklayın ve değerleri düzenleyerek yeniden sıralayın.
4. Inset veya yuvarlatılmış için üst, sağ, alt ve sol ofsetlerini ayarlayın; yuvarlatılmış ayrıca bir köşe yarıçapı alır.
5. Yazdıkça canlı önizlemenin kutuyu kırpmasını izleyin.
6. Üretilen clip-path CSS'ini kopyalayıp stil sayfanıza yapıştırın.

Örnekler

Ön ayar daire, yarıçap 50%, merkez 50% 50%

clip-path: circle(50% at 50% 50%);

Ön ayar çokgen, noktalar (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Ön ayar yuvarlatılmış, tüm kenarlarda inset 10%, köşe yarıçapı 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Sıkça sorulan sorular

clip-path ne için kullanılır?

CSS clip-path özelliği bir öğeyi temel bir şekle kırpar, böylece yalnızca şeklin içindeki alan görünür kalır. Dairesel avatarlar, çapraz bölüm kesimleri, altıgen ızgaralar, görüntü maskeleri ve konuşma balonları için harikadır — hepsi ek görüntü veya SVG dosyası olmadan.

Çokgen ön ayarı nasıl çalışır?

polygon() bir X/Y köşe noktası listesini sırayla birleştirerek bir şekil çizer. Her noktanın yüzde değerlerini düzenleyin ve daha fazla köşe noktası eklemek için Nokta ekle'yi kullanın; son nokta otomatik olarak ilk noktaya geri bağlanır. Şeklin geçerli kalması için en az üç nokta korunur.

Değerler neden yüzde cinsinden?

Yüzdeler kırpmanın öğeyle birlikte ölçeklenmesini sağlar, böylece aynı clip-path her boyutta çalışır. 0% öğe kutusunun sol veya üst kenarı, 100% ise sağ veya alt kenarıdır.

Yuvarlatılmış ön ayarı ne ekler?

Yuvarlatılmış ön ayar, round köşe yarıçapıyla inset() kullanır ve her kenardan içeri doğru kırpılmış, köşeleri yuvarlatılmış bir dikdörtgen üretir — sade bir border-radius'ün bir inset kırpmayla birleştiremeyeceği yumuşak çerçeveli kırpmalar için kullanışlıdır.

Verilerim herhangi bir yere gönderiliyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda JavaScript ile çalışır — şekil değerleriniz cihazınızdan asla ayrılmaz, bu yüzden gizli bir şekilde ve sayfa yüklendikten sonra çevrimdışı bile çalışır.