CSS-clippadgenerator

CSS clip-path accepteert een polygon()-functie die bestaat uit een willekeurig aantal x/y-coördinatenparen, wat betekent dat het een kader kan uitsnijden in vormen die veel verder gaan dan de eenvoudige rechthoeken en cirkels waar de meeste mensen naar reiken. Het addertje onder het gras is dat het met de hand typen van die coördinaten vervelend is en bijna onmogelijk om goed te krijgen voor iets anders dan een basisdriehoek. Deze generator verandert die coördinatenlijst in een reeks versleepbare punten in een live preview, zodat de vorm die u ziet altijd de vorm is die de CSS produceert.

Elk punt in het voorbeeld wordt opgeslagen als een percentage van de breedte en hoogte van het vak, en dat is precies hoe clip-path: polygon() zelf onder de motorkap werkt: een vorm die op deze manier is gebouwd, behoudt zijn verhoudingen correct, ongeacht de grootte waarop het element op een echte pagina terechtkomt, van een klein pictogrammasker tot een heldenbanner over de volledige breedte. Sleep een punt om de omtrek een nieuwe vorm te geven, klik dicht bij een rand om een ​​nieuw punt toe te voegen precies daar waar u hebt geklikt, of dubbelklik op een bestaand punt om het te verwijderen. De editor behoudt altijd minimaal drie punten, omdat een polygoon niet kan bestaan ​​met minder.

De zes gebundelde presets zijn gekozen om te bewijzen dat clippath meer kan dan alleen convexe vormen: de ster en de pijl vertrouwen beide op reflexhoeken die naar binnen wijzen, de tekstballon kerft een driehoekige staart uit een verder eenvoudige rechthoek, en het kaartjesstompje deukt twee inkepingen in tegenoverliggende randen, zoals een echt geperforeerd kaartje eruit ziet. Laad een willekeurige voorinstelling en blijf vanaf daar slepen - niets aan de editor vergrendelt u in de startvorm.

Upload uw eigen afbeelding om een voorbeeld van het clippad te vergelijken met echte inhoud in plaats van een gewoon kader, of sla het uploaden helemaal over en het voorbeeld valt terug naar een gestreept patroon, zodat de uitgesneden vorm hoe dan ook duidelijk zichtbaar blijft. Zoals elke tool op deze site draait het hele ding lokaal in de browser: geen enkele afbeelding verlaat ooit je apparaat en de generator blijft offline werken zodra de pagina is geladen.