Generator CSS Clip-Path

CSS clip-path sprejme funkcijo polygon(), sestavljeno iz poljubnega števila parov koordinat x/y, kar pomeni, da lahko iz polja izreže oblike, ki segajo daleč prek preprostih pravokotnikov in krogov, po katerih večina sega. Težava je v tem, da je ročno vnašanje teh koordinat zamudno in skoraj nemogoče pravilno izvesti za karkoli kompleksnejšega od osnovnega trikotnika – ta generator ta seznam koordinat spremeni v niz vlečljivih točk na predogledu v živo, tako da je oblika, ki jo vidiš, vedno enaka obliki, ki jo ustvari CSS.

Vsaka točka na predogledu je shranjena kot odstotek širine in višine polja, kar je natanko tako, kot deluje clip-path: polygon() v ozadju: tako zgrajena oblika ohrani pravilna razmerja ne glede na velikost elementa na dejanski strani, od majhne maske ikone do pasice hero čez celotno širino. Povleci katero koli točko, da preoblikuješ obris, klikni blizu roba, da dodaš novo točko točno tam, kjer si kliknil, ali dvoklikni obstoječo točko, da jo izbrišeš – urejevalnik vedno ohrani vsaj tri točke, saj mnogokotnik z manj točkami ne more obstajati.

Šest priloženih prednastavitev je izbranih z namenom, da dokažejo, da clip-path zmore več kot le konveksne oblike: zvezda in puščica uporabljata konkavne kote, ki kažejo navznoter, oblaček za govor izreže trikotni rep iz sicer navadnega pravokotnika, odtrgljivi listek pa vdre dve zarezi v nasprotna robova, tako kot je videti pravi perforirani listek. Naloži katero koli prednastavitev in jo nato poljubno spreminjaj – nič v urejevalniku te ne prisili, da ostaneš pri začetni obliki.

Naloži svojo sliko, da predogledaš clip-path na resnični vsebini namesto na navadnem polju, ali pa nalaganje preskoči – predogled bo takrat uporabil črtast vzorec, tako da je izrezana oblika v vsakem primeru jasno vidna. Kot vsako orodje na tem spletnem mestu tudi to v celoti deluje lokalno v brskalniku: nobena slika nikoli ne zapusti tvoje naprave, generator pa deluje tudi brez povezave, ko je stran enkrat naložena.