Noktaları sürükleyerek clip-path şekilleri çizin ya da circle, ellipse ve inset kullanın.
Her noktayı taşımak için önizlemedeki beyaz tutamaçları sürükleyin.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Düz kenarlı her şey için polygon, yuvarlak kırpmalar için circle ve ellipse, kenarlardan içeri kesilmiş bir dikdörtgen için isteğe bağlı yuvarlak köşeli inset.
polygon ile tutamaçları doğrudan önizleme üzerinde sürükler, nokta ekleyip çıkarırsınız. Diğer fonksiyonlar yarıçapları ve merkez konumu için kaydırıcı kullanır.
Değer yüzde kullanır; böylece şekil uyguladığınız ögeyle ölçeklenir, farklı bir boyutta bozulmaz.
Bir şeklin dışındaki her şeyi gizler; böylece bir görseli altıgene kırpabilir, bölüme açılı kenar verebilir ya da ek bir öge veya arka plan görseli olmadan konuşma balonu kurabilirsiniz.
Hayır. Kırpılan alanlar işaretçi olaylarını da almayı bırakır; kırpılmış bir düğme yalnızca görünen şeklin içinde tıklanabilir. Bu genelde faydalı, bazen de şaşırtıcıdır.
Neredeyse her zaman yüzde. Öge yeniden boyutlanırken şekli orantılı tutarlar; bu aracın ürettiği her değerin yüzde olmasının sebebi budur.
Evet, ancak yalnızca aynı tipte ve aynı nokta sayısına sahip şekiller arasında. Dört noktalı bir poligonu altı noktalıya animasyonlamak ara değer üretmez, atlar.
Yüzdeler ögenin kendi genişlik ve yüksekliğine göredir; aynı değerler geniş bir kutuda daha geniş şekil üretir. Ögeyi kare tutun ya da dikey değerleri telafi edecek şekilde ayarlayın.
clip-path sert ve geometrik bir kenarla keser. Maske görsel veya gradyan kullanır, bu yüzden yumuşak geçiş yapabilir. Şekiller için clip-path, yumuşak kenarlar için maske kullanın.
Evet. Burada kullanılan tüm temel şekil fonksiyonları tüm güncel tarayıcılarda öneksiz çalışır.
Evet, tamamen ücretsiz ve üyeliksiz.
Köşeleri görsel olarak yuvarlayın; organik blob şekilleri üreten eğik çizgi sözdizimi dahil.
Aracı AçSVG'yi CSS arka planları ve maskeler için data URI'ye kodlayın; Base64'ten küçük.
Aracı AçTailwind çıktısı sunan CSS gradyan oluşturucu. Doğrusal ve radyal gradyanları görsel olarak tasarlayın, üretime hazır CSS veya Tailwind sınıflarını kopyalayın.
Aracı Aç