CSS Clip-Path Generator

CSS clip-path sprejme funkcijo polygon(), sestavljeno iz poljubnega števila koordinatnih parov x/y, kar pomeni, da lahko polje izreže v oblike, ki daleč presegajo preproste pravokotnike in kroge, po katerih večina ljudi posega. Ulov je v tem, da je ročno vnašanje teh koordinat dolgočasno in ga je skoraj nemogoče poiskati pravilno za karkoli, kar presega osnovni trikotnik – ta generator ta seznam koordinat spremeni v nabor točk, ki jih je mogoče povleči v predogledu v živo, tako da je oblika, ki jo vidite, vedno oblika, ki jo ustvari CSS.

Vsaka točka v predogledu je shranjena kot odstotek širine in višine polja, kar je natanko tako, kot sam clip-path: polygon() deluje pod pokrovom: oblika, zgrajena na ta način, ohranja svoja razmerja pravilna, ne glede na velikost elementa na resnični strani, od majhne maske ikone do pasice junaka polne širine. Povlecite katero koli točko, da preoblikujete obris, kliknite blizu roba, da dodate novo točko natanko tam, kjer ste kliknili, ali dvokliknite obstoječo točko, da jo izbrišete - urejevalnik vedno ohrani vsaj tri točke, saj poligon ne more obstajati z manj.

Šest združenih prednastavitev je izbranih, da dokažejo, da lahko pot izrezka naredi več kot konveksne oblike: zvezda in puščica se zanašata na refleksne kote, ki so obrnjeni navznoter, govorni oblaček izreže trikoten rep iz sicer navadnega pravokotnika, čep vstopnice pa zareže dve zarezi v nasprotna robova, kot je videti prava perforirana vstopnica. Naložite katero koli prednastavitev in nadaljujte z vlečenjem od tam - nič o urejevalniku vas ne zaklene v začetni obliki.

Naložite svojo sliko, če si želite predogledati pot izrezka v primerjavi z resnično vsebino namesto z navadnim poljem, ali pa v celoti preskočite nalaganje in predogled se vrne na črtasti vzorec, tako da izrezana oblika ostane jasno vidna tako ali tako. Kot vsa orodja na tem spletnem mestu se celotna stvar izvaja lokalno v brskalniku: nobena slika ne zapusti vaše naprave, generator pa deluje brez povezave, ko se stran naloži.