CSS Clip-Path-generator
Tegn vilkårlige polygonformer – inkludert konkave hakk – ved å dra punkter på en direkte forhåndsvisningsboks eller ditt eget opplastede bilde, og kopier den resulterende CSS clip-path: polygon(...)-verdien.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
CSS clip-path godtar en polygon()-funksjon laget av et vilkårlig antall x/y-koordinatpar, noe som betyr at den kan skjære en boks til former langt utover de enkle rektanglene og sirklene de fleste tyr til. Haken er at å skrive disse koordinatene for hånd er kjedelig og nesten umulig å få riktig for noe utover en grunnleggende trekant – denne generatoren gjør den koordinatlisten om til et sett med dra-bare punkter på en direkte forhåndsvisning, slik at formen du ser alltid er den formen CSS-en produserer.
Hvert punkt på forhåndsvisningen er lagret som en prosentandel av boksens bredde og høyde, noe som er nøyaktig slik clip-path: polygon() selv fungerer under panseret: en form bygget på denne måten beholder proporsjonene sine korrekte uansett hvilken størrelse elementet ender opp med på en ekte side, fra en liten ikonmaske til et fullbredde toppbanner. Dra et hvilket som helst punkt for å omforme omrisset, klikk nær en kant for å legge til et nytt punkt nøyaktig der du klikket, eller dobbeltklikk et eksisterende punkt for å slette det – redigeringsverktøyet beholder alltid minst tre punkter, siden et polygon ikke kan eksistere med færre.
De seks medfølgende forhåndsinnstillingene er valgt for å vise at clip-path kan gjøre mer enn konvekse former: stjernen og pilen er begge avhengige av refleksvinkler som peker innover, snakkeboblen skjærer ut en trekantet hale fra et ellers vanlig rektangel, og billettfliken lager to hakk i motsatte kanter slik en ekte perforert billett ser ut. Last en hvilken som helst forhåndsinnstilling og fortsett å dra derfra – ingenting med redigeringsverktøyet låser deg til startformen.
Last opp ditt eget bilde for å forhåndsvise clip-path-en mot ekte innhold i stedet for en vanlig boks, eller hopp over opplastingen helt, så faller forhåndsvisningen tilbake til et stripete mønster slik at den utskårne formen forblir tydelig synlig uansett. Som alle verktøy på dette nettstedet, kjører hele greia lokalt i nettleseren: ingen bilder forlater noen gang enheten din, og generatoren fortsetter å fungere offline etter at siden har lastet.