CSS Clip-Path Generator

CSS clip-path accepterer en polygon()-funktion lavet af et vilkårligt antal x/y-koordinatpar, hvilket betyder, at den kan skære en boks i former langt ud over de simple rektangler og cirkler, de fleste mennesker rækker ud efter. Fangsten er, at det er kedeligt at skrive disse koordinater i hånden og næsten umuligt at få det rigtige til noget ud over en grundlæggende trekant - denne generator forvandler denne koordinatliste til et sæt af trækbare punkter på en live forhåndsvisning, så den form, du ser, altid er den form, som CSS'en producerer.

Hvert punkt på forhåndsvisningen gemmes som en procentdel af boksens bredde og højde, hvilket er præcis sådan, selve clip-path: polygon() fungerer under hætten: en form bygget på denne måde holder sine proportioner korrekte, uanset hvilken størrelse elementet ender på på en rigtig side, fra en lille ikonmaske til et heltebanner i fuld bredde. Træk et vilkårligt punkt for at omforme 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 - editoren beholder altid mindst tre punkter, da en polygon ikke kan eksistere med færre.

De seks medfølgende forudindstillinger er udvalgt for at bevise, at clip-path kan mere end konvekse former: stjernen og pilen er begge afhængige af refleksvinkler, der peger indad, taleboblen skærer en trekantet hale ud af et ellers almindeligt rektangel, og billetstubben buler to hak ind i modsatte kanter, som en rigtig perforeret billet ser ud. Indlæs enhver forudindstilling, og fortsæt med at trække derfra - intet ved editoren låser dig til startformen.

Upload dit eget billede for at få vist klipstien mod ægte indhold i stedet for en almindelig boks, eller spring uploaden helt over, og forhåndsvisningen falder tilbage til et stribet mønster, så den klippede form forbliver tydeligt synlig begge veje. Som alle andre værktøjer på dette websted kører det hele lokalt i browseren: intet billede forlader nogensinde din enhed, og generatoren fortsætter med at arbejde offline, når siden er indlæst.