CSS-clip-path-generator

CSS clip-path accepteert een polygon()-functie die uit een willekeurig aantal x/y-coördinaatparen bestaat, wat betekent dat het een vak in vormen kan snijden die veel verder gaan dan de simpele rechthoeken en cirkels waar de meeste mensen naar grijpen. Het probleem is dat het handmatig typen van die coördinaten tijdrovend is en bijna onmogelijk correct te krijgen voor iets geavanceerders dan een simpele driehoek — deze generator verandert die coördinatenlijst in een set versleepbare punten op een live preview, zodat de vorm die je ziet altijd de vorm is die de CSS produceert.

Elk punt op de preview wordt opgeslagen als een percentage van de breedte en hoogte van het vak, wat precies is hoe clip-path: polygon() onder de motorkap werkt: een op deze manier gebouwde vorm behoudt zijn proporties, ongeacht welk formaat het element uiteindelijk op een echte pagina krijgt, van een klein pictogrammasker tot een paginabrede hero-banner. Sleep een punt om de contour aan te passen, klik vlak bij een rand om een nieuw punt toe te voegen precies waar je klikte, of dubbelklik op een bestaand punt om het te verwijderen — de editor behoudt altijd minimaal drie punten, omdat een polygoon niet met minder kan bestaan.

De zes meegeleverde presets zijn uitgekozen om te bewijzen dat clip-path meer kan dan alleen convexe vormen: de ster en de pijl maken beide gebruik van inspringende hoeken die naar binnen wijzen, de tekstballon snijdt een driehoekige uitloper uit een verder gewone rechthoek, en het ticketstrookje deukt twee inkepingen in tegenoverliggende randen zoals een echt geperforeerd ticket eruitziet. Laad een preset en blijf vanaf daar slepen — niets in de editor sluit je op in de startvorm.

Upload je eigen afbeelding om de clip-path tegen echte content te bekijken in plaats van een effen vlak, of sla de upload helemaal over en de preview valt terug op een gestreept patroon zodat de uitgesneden vorm hoe dan ook duidelijk zichtbaar blijft. Zoals elke tool op deze site draait het geheel lokaal in de browser: geen afbeelding verlaat ooit je apparaat en de generator blijft offline werken zodra de pagina is geladen.