clip-path-generator
Kies een vorm, pas hem aan, kopieer de CSS. Geen afbeelding nodig.
- Draait in je browser — je tekst wordt nergens naartoe gestuurd
- Geen aanmelding, geen quota, gratis te gebruiken zo vaak je wilt
Hoe het werkt
clip-path knipt een element terug tot een omtrek. Alles buiten de vorm wordt niet getekend en is niet klikbaar, waardoor het een echte vorm is in plaats van een afbeelding van een vorm — en het werkt op elk element, inclusief afbeeldingen en video.
Procenten, geen pixels
Polygoonpunten worden opgegeven als percentages van de eigen breedte en hoogte van het element, zodat de vorm met het element meerekt in plaats van bij een ander formaat te breken. Daardoor is het bruikbaar in een responsieve opmaak.
Klikken volgen de vorm
Dit is wat clip-path onderscheidt van een decoratieve overlay. Het weggeknipte gebied ontvangt helemaal geen pointer-events, dus een driehoekige knop is driehoekig voor de muis en voor het oog.
Animeren tussen vormen
Een polygoon kan alleen soepel overgaan in een andere polygoon als beide hetzelfde aantal punten hebben. De gebruikelijke truc is om de eenvoudigere vorm aan te vullen met dubbele punten zodat de aantallen kloppen — een driehoek geschreven als vier punten met twee op dezelfde plek kan veranderen in een vierkant.
De -webkit--regel
Huidige browsers hebben alleen de eigenschap zonder voorvoegsel nodig. De versie met voorvoegsel is toegevoegd omdat sommige oudere Safari-versies die nog nodig hebben en het niets kost om te laten staan.
Wat het niet doet
Het knipt; het verdeelt de inhoud niet opnieuw. Omringende tekst behandelt het element nog steeds als de oorspronkelijke rechthoek. Om tekst om een vorm te laten lopen heb je shape-outside nodig, dat dezelfde syntaxis gebruikt.
clip-path-generator — vragen
Blijven de uitgeknipte gebieden klikbaar?
Nee. Alles buiten de vorm ontvangt geen pointer-events, wat meestal precies is wat je wilt.
Kan ik een clip-path animeren?
Tussen polygonen met hetzelfde aantal punten wel. Vul de eenvoudigere vorm aan met dubbele punten om ze gelijk te maken.
Loopt tekst om de vorm heen?
Nee. clip-path knipt alleen. Gebruik shape-outside voor tekstomloop.
Is het voorvoegsel -webkit- nodig?
Alleen voor oudere Safari. Elke huidige browser ondersteunt de gewone eigenschap.
Kan ik het op een afbeelding of video gebruiken?
Ja, op elk element.