◇

CSS clip-path Oluşturucu

Bir öğeyi yaygın şekillere kırpın ve clip-path CSS'ini kopyalayın.

Dosyalarınız bu cihazda kalır

Dosyalar tarayıcınızda işlenir, asla sunucuya yüklenmez. Site, araçları çalıştırmak için gereken kod ve kaynakları indirir. Hesap veya takip yoktur.

Bu aracı çevrimdışı kullanım için tek bir HTML dosyası olarak kaydetmek üzere İndir'i kullanın.

Gizlilik →

Şekil

çıktı

Çözümlü bir örnek deneyin

Örnek

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); elde etmek için altıgen şeklini seçin. Her çift, öğe içindeki bir x ve y konumudur; bu yüzden şekil öğenin genişliği ve yüksekliğiyle birlikte esner.

Aklınızda bulunsun

Kırpma, öğenin bir kısmını gizler ama yerleşim kutusunu korur: komşular kaymaz ve gizlenen köşeler artık tıklama almaz. Kenarlıklar ve kutu gölgeleri de kırpılır; gölge gerekiyorsa sarmalayıcı bir öğeye drop-shadow filtresi uygulayın.

Bu araç hakkında

Bir şekil seçin ve eşleşen clip-path kuralıyla önizleme kutusunu anında kırpın, ardından kullanıma hazır CSS'i kopyalayın. Önizleme tamamen tarayıcınızda canlı olarak güncellenir.

Sık sorulan sorular

Poligon clip-path nasıl çalışır?

Her nokta, kutuya göre bir x y yüzde çiftidir; tarayıcı bunları sırayla birleştirir ve yalnızca anahattın içindeki alanı gösterir.

Tüm tarayıcılar clip-path'i destekliyor mu?

Poligon, daire, elips ve inset şekilleri tüm modern tarayıcılarda desteklenir, bu yüzden üretilen CSS önek olmadan çalışır.