CSS Clip-Path Generator
Bewerk CSS clip-path-vormen visueel met presets, versleepbare polygoonpunten en schuifregelaars. Kopieer de clip-path-CSS.
🔒 Draait volledig in uw browser — niets wordt geüploadOntwerp CSS clip-path-vormen visueel
Met de eigenschap clip-path knip je een element in bijna elke gewenste vorm, met alleen CSS. Zeshoekige avatars, schuine sectieranden, pijlvormige knoppen en tekstballonnen kun je allemaal maken zonder afbeeldingen of extra markup. Polygooncoördinaten met de hand schrijven is echter omslachtig. Deze generator geeft je een live voorbeeld met versleepbare handgrepen, zodat je het element kunt vormgeven en de kant-en-klare declaratie kunt kopiëren.
Polygonen, cirkels, ellipsen en insets
De tool ondersteunt de belangrijkste functies voor basisvormen. polygon() neemt een lijst punten, geschreven als x- en y-percentages, wat ideaal is voor driehoeken, trapezia, sterren en pijlen. circle() en ellipse() nemen een straal en een middelpunt, en inset() snijdt vanaf elke rand van het vak naar binnen, met een optionele radius voor afgeronde hoeken. Kies een preset als startpunt en verfijn die. Bij polygonen sleep je een handgreep om een hoekpunt te verplaatsen, of geef je een handgreep focus en gebruik je de pijltjestoetsen voor precieze stappen van één procent, met Shift ingedrukt voor grotere sprongen.
Tips voor het gebruik van clip-path
Omdat alle waarden percentages zijn, schaalt de vorm mee met het element, wat het zeer geschikt maakt voor responsieve lay-outs. Onthoud dat clip-path alleen het tekenen beïnvloedt: randen en box-shadows buiten de vorm worden ook weggeknipt, dus gebruik een wrapper-element met filter: drop-shadow() als je een schaduw nodig hebt die de vorm volgt. Je kunt ook met CSS-transities animeren tussen twee polygonen met hetzelfde aantal punten voor vloeiende morph-effecten. De gegenereerde code is één regel die je in elke stylesheet kunt plakken, en al het bewerken gebeurt lokaal in je browser.
Hoe te gebruiken
- Kies een presetBegin met een vorm zoals een driehoek, zeshoek, ster, pijl, cirkel of inset-rechthoek.
- Bewerk de vormSleep de handgrepen van de polygoon, of gebruik de schuifregelaars voor cirkel-, ellips- en inset-vormen.
- Voeg punten toe of verwijder zeSelecteer een punt en voeg er een ander punt na toe, of verwijder het, om de polygoon te verfijnen.
- Kopieer de CSSKopieer de clip-path-declaratie en pas die toe op elk gewenst element.