CSS Clip-path-generator
De CSS clip-path generator maakt clip-path-waarden voor veelgebruikte vormen (driehoek, pijl, vijfhoek, zeshoek, ster, chevron, cirkel, ellips en afgeronde inset) met een live preview.
Over deze tool
De CSS clip-path generator maakt clip-path-waarden voor veelgebruikte vormen (driehoek, pijl, vijfhoek, zeshoek, ster, chevron, cirkel, ellips en afgeronde inset) met een live preview.
Zo gebruik je het
- Kies een vorm uit de lijst.
- Kies een vulkleur voor de preview.
- Klik op Copy CSS en pas de clip-path toe op elk element of elke afbeelding.
Goed om te weten
- clip-path verbergt alles buiten een vorm, dus je hebt geen afbeeldingsmasker of SVG-bestand nodig.
- polygon() accepteert een lijst van x y-punten in procenten, die meeschalen met het element.
- circle(50% at 50% 50%) snijdt een element bij tot een gecentreerde cirkel.
- inset() met round geeft een rechthoekige uitsnede afgeronde hoeken.
- Basisvormen van clip-path worden ondersteund in alle huidige grote browsers.
Werkt volledig in je browser — niets wat je invoert wordt geüpload of opgeslagen.
Veelgestelde vragen
Hoe snij ik een afbeelding in een vorm met CSS?
Pas een clip-path toe op de afbeelding, bijvoorbeeld clip-path: polygon(50% 0%, 0% 100%, 100% 100%); voor een driehoek.
Wat is het verschil tussen clip-path en mask?
clip-path snijdt een vectorvorm uit met harde randen. mask gebruikt een afbeelding of gradiënt en kan zachte, gedeeltelijk transparante randen maken.
Kan clip-path geanimeerd worden?
Ja, als beide vormen dezelfde functie en hetzelfde aantal punten gebruiken, kan de browser er een overgang tussen maken.
Heeft clip-path invloed op klikken?
Ja. Delen buiten de uitgesneden vorm worden niet weergegeven en ontvangen geen pointer events.