◇

CSS clip-path-generator

Knip een element in veelgebruikte vormen en kopieer de clip-path CSS.

Je bestanden blijven op dit apparaat

Bestanden worden in je browser verwerkt, nooit geüpload. De site downloadt de benodigde code en bestanden. Geen accounts of trackers.

Gebruik Downloaden om deze tool als één HTML-bestand op te slaan voor offline gebruik.

Privacy →

Vorm

uitvoer

Probeer een uitgewerkt voorbeeld

Voorbeeld

Kies de vorm zeshoek voor clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);. Elk paar is een x- en y-positie in het element, dus de vorm rekt mee met de breedte en hoogte van het element.

Goed om te weten

Uitknippen verbergt een deel van het element maar houdt zijn lay-outvak: buren verschuiven niet en de verborgen hoeken reageren niet meer op klikken. Randen en schaduwen worden ook geknipt; zet voor een schaduw een drop-shadow-filter op een omhullend element.

Over deze tool

Kies een vorm en knip direct een voorbeeldvak met de bijbehorende clip-path-regel, en kopieer dan kant-en-klare CSS. Het voorbeeld werkt live bij, volledig in je browser.

Veelgestelde vragen

Hoe werken polygon-clip-paths?

Elk punt is een x y-percentagepaar relatief aan het vak; de browser verbindt ze op volgorde en toont alleen het gebied binnen de omtrek.

Ondersteunen alle browsers clip-path?

Polygon-, cirkel-, ellips- en inset-vormen worden in elke moderne browser ondersteund, dus de gegenereerde CSS werkt zonder prefixes.