CSS Klip Yolu Oluşturucu

CSS klip yolu, herhangi bir sayıda x/y koordinat çiftinden oluşan bir polygon() işlevini kabul eder; bu, bir kutuyu, çoğu insanın ulaştığı basit dikdörtgenlerin ve dairelerin çok ötesinde şekillere ayırabileceği anlamına gelir. İşin püf noktası, bu koordinatları elle yazmanın sıkıcı olması ve temel bir üçgenin ötesinde herhangi bir şeyi doğru bir şekilde elde etmenin neredeyse imkansız olmasıdır - bu oluşturucu, bu koordinat listesini canlı bir önizlemede bir dizi sürüklenebilir noktaya dönüştürür, böylece gördüğünüz şekil her zaman CSS'nin ürettiği şekil olur.

Önizlemedeki her nokta, kutunun genişliğinin ve yüksekliğinin bir yüzdesi olarak depolanır; bu, tam olarak Clip-path: polygon()'un kendisi gibi çalışır: bu şekilde oluşturulan bir şekil, öğenin gerçek bir sayfada boyutu ne olursa olsun, küçük bir simge maskesinden tam genişlikte bir kahraman banner'ına kadar orantılarını doğru tutar. Anahattı yeniden şekillendirmek için herhangi bir noktayı sürükleyin, tam olarak tıkladığınız yere yeni bir nokta eklemek için bir kenara yakın bir yere tıklayın veya mevcut bir noktayı silmek için çift tıklayın; bir çokgen daha azıyla var olamayacağından düzenleyici her zaman en az üç noktayı tutar.

Klip yolunun dışbükey şekillerden daha fazlasını yapabileceğini kanıtlamak için bir araya getirilen altı ön ayar seçilmiştir: hem yıldız hem de ok içe dönük refleks açılarına dayanır, konuşma balonu normalde düz bir dikdörtgenden üçgen bir kuyruk oluşturur ve bilet koçanları, gerçek bir delikli biletin göründüğü gibi zıt kenarlara iki çentik açar. Herhangi bir hazır ayarı yükleyin ve oradan sürüklemeye devam edin; düzenleyiciyle ilgili hiçbir şey sizi başlangıç ​​şekline kilitlemez.

Klip yolunu düz bir kutu yerine gerçek içerikle önizlemek için kendi görselinizi yükleyin veya yüklemeyi tamamen atlayın ve önizleme çizgili bir desene geri döner, böylece kesim şekli her iki durumda da açıkça görünür kalır. Bu sitedeki her araç gibi, her şey yerel olarak tarayıcıda çalışır: hiçbir görüntü cihazınızdan ayrılmaz ve sayfa yüklendikten sonra oluşturucu çevrimdışı çalışmaya devam eder.