CSS Clip-Path Üretici

Nasıl kullanılır?

1. Kural için bir Sınıf adı yazın, örneğin triangle, ve bir Şekil seçin.
2. Bir polygon için Önizleme üzerindeki bir noktayı sürükleyin ya da alanlara x ve y değerlerini yazın. Nokta sayısını Nokta ekle ve Son noktayı kaldır ile değiştirin.
3. inset, circle ya da ellipse için sayıları alanlara yazın. Önizleme hemen yeniden çizilir.
4. CSS kuralını stil sayfanıza kopyalayın ve sınıfı kesmek istediğiniz öğeye verin.

Dört şekil

CSS Shapes Modülü, clip-path'in aldığı temel şekilleri tanımlar. Çokgen, her biri bir konum çiftinden oluşan noktaların listesidir; noktalar yazdığınız sırayla birleştirilir. İç boşluk, kutuyu üst, sağ, alt ve sol olmak üzere dört uzaklıkta keser. Daire ya da elips, bir ya da iki yarıçapa ve at sözcüğünden sonra yazılan bir merkeze sahiptir.

• polygon(50% 0%, 100% 100%, 0% 100%) üç noktalıdır; her nokta yüzde cinsinden bir x ve bir y taşır.
• inset(10% 20% 10% 20%) üstten ve alttan %10, soldan ve sağdan %20 keser.
• circle(60px at 50% 50%) 60 px yarıçaplı bir dairedir ve merkezi kutunun ortasındadır.

Yüzdeler ve referans kutusu

Bir noktadaki, iç boşluktaki ya da merkezdeki yüzde, kutunun bir payıdır ve belirtim bunu referans kutusunun kullanılan boyutuna göre çözer. CSS Masking Modülü, referans kutusu verilmediğinde kenarlık kutusunun kullanıldığını söyler. Şeklin dışında kalan öğe parçaları çizilmez.

Aracın yazmadıkları

• Çokgen için dolgu kuralı, iç boşluğun round bölümü ve clip-path'in url() ya da path() biçimleri.
• Daire ya da elips için yüzde yarıçapı. Bu aracın okuduğu şekil metni nasıl çözüldüğünü söylemediği için yarıçaplar px cinsindendir.

Sık sorulan sorular