CSS-clip-path-generator

Wat is CSS-clip-path-generator?

De CSS-clip-path-generator is een gratis visuele editor voor de CSS-eigenschap clip-path, gemaakt voor front-end-ontwikkelaars en ontwerpers die elementen in niet-rechthoekige vormen willen bijsnijden. Kies een preset uit de keuzelijst: circle() en ellipse() met een straal en middelpunt, polygon() met zoveel hoekpunten als je nodig hebt, inset() met vier randafstanden, of een afgeronde inset()-variant met een hoekstraal. Elke parameter is een percentage dat je via een getalveld invoert, en een voorvertoningsvak met schaakbordachtergrond toont de resulterende vorm in realtime. De volledige clip-path-CSS wordt voor je gegenereerd om te kopiëren. Gebruik het om afbeeldingen te maskeren, diagonale sectiescheidingen te snijden, zeshoekige avatars te bouwen of tekstballonvormen uit te snijden zonder coördinaten met de hand te tellen.

CSS-clip-path-generator gebruiken

1. Kies een vorm in de presets-keuzelijst: cirkel, ellips, polygoon, inset of afgerond.
2. Stel voor cirkel of ellips de straal (of de X/Y-stralen) en de middelpunt-X/Y-positie in procenten in.
3. Bewerk voor polygoon de X en Y van elk hoekpunt in procenten; klik op Punt toevoegen om meer hoekpunten toe te voegen en herschik ze door de waarden te bewerken.
4. Stel voor inset of afgerond de afstanden boven, rechts, onder en links in; afgerond neemt ook een hoekstraal.
5. Bekijk hoe de live voorvertoning de box bijsnijdt terwijl je typt.
6. Kopieer de gegenereerde clip-path-CSS en plak deze in je stylesheet.

Voorbeelden

Preset cirkel, straal 50%, middelpunt 50% 50%

clip-path: circle(50% at 50% 50%);

Preset polygoon, punten (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset afgerond, inset 10% aan alle zijden, hoekstraal 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Veelgestelde vragen

Waarvoor wordt clip-path gebruikt?

De CSS-eigenschap clip-path snijdt een element bij tot een basisvorm, zodat alleen het gebied binnen de vorm zichtbaar blijft. Hij is ideaal voor ronde avatars, diagonale sectiesneden, zeshoekige rasters, afbeeldingsmaskers en tekstballonnen — allemaal zonder extra afbeeldingen of SVG-bestanden.

Hoe werkt de polygoon-preset?

polygon() tekent een vorm door een lijst van X/Y-hoekpunten op volgorde te verbinden. Bewerk de procentwaarden van elk punt en gebruik Punt toevoegen om meer hoekpunten in te voegen; het laatste punt verbindt automatisch terug met het eerste. Er worden minimaal drie punten aangehouden zodat de vorm geldig blijft.

Waarom staan de waarden in procenten?

Procenten zorgen ervoor dat de clip met het element meeschaalt, zodat dezelfde clip-path bij elk formaat werkt. 0% is de linker- of bovenrand en 100% de rechter- of onderrand van de box van het element.

Wat voegt de afgerond-preset toe?

De afgerond-preset gebruikt inset() met een round-hoekstraal en produceert een rechthoek die aan elke zijde naar binnen is bijgesneden en afgeronde hoeken krijgt — handig voor zachte, omkaderde uitsnedes die een gewone border-radius niet met een inset-clip kan combineren.

Worden mijn gegevens ergens naartoe verstuurd?

Nee. De generator draait volledig in je browser met JavaScript — je vormwaarden verlaten nooit je apparaat, dus hij werkt privé en zelfs offline nadat de pagina is geladen.