CSS Clip-Path Generator
Tegn vilkårlige polygonformer – også konkave hak – ved at trække i punkter på en forhåndsvisningsboks i realtid eller på dit eget uploadede billede, og kopier den resulterende CSS clip-path: polygon(...)-værdi.
🔒 Behandles helt i din browser - intet, du indtaster her, bliver nogensinde uploadet.
Resultat
CSS clip-path accepterer en polygon()-funktion, der består af et vilkårligt antal x/y-koordinatpar, hvilket betyder, at den kan skære en boks til langt mere end de simple rektangler og cirkler, de fleste griber til. Udfordringen er, at indtastning af koordinaterne i hånden er kedeligt og næsten umuligt at få rigtigt for andet end en basal trekant – denne generator forvandler den koordinatliste til et sæt trækbare punkter på en live-forhåndsvisning, så den form du ser, altid er den form CSS'en producerer.
Hvert punkt på forhåndsvisningen gemmes som en procentdel af boksens bredde og højde, hvilket er præcis sådan clip-path: polygon() selv fungerer under motorhjelmen: en form bygget på denne måde bevarer sine proportioner korrekt, uanset hvilken størrelse elementet ender med på en rigtig side – fra en lille ikonmaske til et fuldbredt heltebanner. Træk i et hvilket som helst punkt for at ændre omridset, klik tæt på en kant for at tilføje et nyt punkt præcis der, hvor du klikkede, eller dobbeltklik på et eksisterende punkt for at slette det – redigeringsværktøjet bevarer altid mindst tre punkter, eftersom en polygon ikke kan eksistere med færre.
De seks medfølgende forudindstillinger er valgt for at bevise, at clip-path kan mere end konvekse former: stjernen og pilen benytter sig begge af indadgående vinkler, der pejer indad, taleboblen skærer en trekantet hale ud af et ellers almindeligt rektangel, og billetstumpen laver to hak i modsatte kanter, præcis som en ægte perforeret billet ser ud. Indlæs en hvilken som helst forudindstilling, og fortsæt med at trække derfra – intet i redigeringsværktøjet låser dig fast i startformen.
Upload dit eget billede for at forhåndsvise clip-path'en mod ægte indhold i stedet for en simpel boks, eller spring uploaden helt over, så falder forhåndsvisningen tilbage på et stribet mønster, så den udskårne form forbliver tydeligt synlig uanset hvad. Ligesom alle andre værktøjer på dette website kører det hele lokalt i browseren: intet billede forlader nogensinde din enhed, og generatoren fortsætter med at fungere offline, når først siden er indlæst.