Geliştirici aracı

clip-path oluşturucu

Bir şekil seçin, ayarlayın, CSS'i kopyalayın. Resim gerekmez.

clip-path oluşturucu Cihazınızda çalışır
  • Tarayıcınızda çalışır — metniniz hiçbir yere gönderilmez
  • Kayıt yok, kota yok, istediğiniz sıklıkta ücretsiz kullanın

Nasıl çalışır

clip-path bir öğeyi bir ana hatta kadar keser. Şeklin dışındaki hiçbir şey çizilmez ve tıklanamaz; bu da onu bir şeklin resmi değil gerçek bir şekil yapar — ve resimler ve video dahil her öğede çalışır.

Piksel değil, yüzde

Çokgen noktaları, öğenin kendi genişliğinin ve yüksekliğinin yüzdesi olarak verilir; böylece şekil farklı bir boyutta bozulmak yerine öğeyle birlikte esner. Duyarlı bir düzende kullanılabilir olmasını sağlayan budur.

Tıklamalar şekli izler

clip-path'i dekoratif bir kaplamadan ayıran kısım budur. Kırpılan bölge işaretçi olaylarını hiç almaz; bu yüzden üçgen bir düğme fareye de gözle olduğu kadar üçgen görünür.

Şekiller arasında canlandırma

Bir çokgen, yalnızca her ikisi de aynı sayıda nokta listeliyorsa başka bir çokgene yumuşak biçimde geçebilir. Olağan hile, sayıların eşleşmesi için daha basit şekli yinelenen noktalarla doldurmaktır — ikisi aynı yerde olan dört nokta olarak yazılmış bir üçgen, bir kareye dönüşebilir.

-webkit- satırı

Güncel tarayıcılar yalnızca öneksiz özelliğe ihtiyaç duyar. Önekli kopya, bazı eski Safari sürümleri hâlâ gerektirdiği ve bırakmanın hiçbir maliyeti olmadığı için dahil edilmiştir.

Neleri yapmaz

Kırpar; yeniden akıtmaz. Çevredeki metin öğeyi hâlâ özgün dikdörtgeni olarak görür. Metni bir şeklin etrafına sardırmak için aynı söz dizimini alan shape-outside gerekir.

SSS

clip-path oluşturucu — sorular

Kırpılan alanlar tıklanabilir kalır mı?

Hayır. Şeklin dışındaki hiçbir şey işaretçi olayı almaz; bu da genellikle tam olarak istediğiniz şeydir.

Bir clip-path'i canlandırabilir miyim?

Aynı sayıda noktaya sahip çokgenler arasında evet. Daha basit şekli, eşleşmesi için yinelenen noktalarla doldurun.

Metin şeklin etrafına sarılır mı?

Hayır. clip-path yalnızca kırpar. Sarma için shape-outside kullanın.

-webkit- öneki gerekli mi?

Yalnızca eski Safari için. Güncel her tarayıcı düz özelliği destekler.

Bir resimde veya videoda kullanabilir miyim?

Evet, her öğede.