CSS Clip-Path ģenerators

CSS clip-path pieņem polygon() funkciju, kas sastāv no jebkāda skaita x/y koordinātu pāriem, un tas nozīmē, ka tā spēj lodziņu izgrebt formās, krietni pārsniedzot vienkāršos taisnstūrus un apļus, pie kuriem lielākā daļa ķeras. Āķis ir tajā, ka šo koordinātu ievadīšana ar rokām ir garlaicīga un gandrīz neiespējami precīzi paveicama jebkam, kas sarežģītāks par pamata trīsstūri — šis ģenerators pārvērš koordinātu sarakstu par velkamu punktu kopu dzīvā priekšskatījumā, tāpēc redzamā forma vienmēr ir tā forma, kādu CSS rada.

Katrs priekšskatījuma punkts tiek saglabāts kā procentuālā daļa no lodziņa platuma un augstuma, un tieši tā iekšēji darbojas arī clip-path: polygon() pati: šādi veidota forma saglabā pareizās proporcijas neatkarīgi no tā, kādā izmērā elements nonāk reālā lapā — no mazas ikonu maskas līdz pilna platuma galvenajam reklāmkarogam. Velc jebkuru punktu, lai pārveidotu kontūru, klikšķini malas tuvumā, lai pievienotu jaunu punktu tieši tur, kur noklikšķināji, vai dubultklikšķini esošu punktu, lai to dzēstu — redaktors vienmēr saglabā vismaz trīs punktus, jo daudzstūris ar mazāk punktiem nevar pastāvēt.

Sešas iekļautās sagataves ir izvēlētas, lai pierādītu, ka clip-path spēj vairāk nekā tikai izliektas formas: zvaigzne un bulta abas balstās uz atvirzes leņķiem, kas vērsti uz iekšu, runas burbulis izgrebj trīsstūrainu asti no citādi parasta taisnstūra, bet biļetes galiņš iespiež divus robus pretējās malās — tieši tā, kā izskatās īsta perforēta biļete. Ielādē jebkuru sagatavi un turpini vilkt — nekas redaktorā tevi neieslēdz sākuma formā.

Augšupielādē savu attēlu, lai priekšskatītu clip-path pret reālu saturu, nevis pret vienkāršu lodziņu; izlaid augšupielādi, un priekšskatījums pārslēgsies uz svītrotu rakstu, lai izgrieztā forma tāpat būtu skaidri redzama. Tāpat kā visi šīs vietnes rīki, viss darbojas lokāli pārlūkā: neviens attēls nekad nepamet tavu ierīci, un ģenerators turpina strādāt bezsaistē, tiklīdz lapa ir ielādēta.