Gebruik shape() voor responsief knippen

Noam Rosenthal

Gepubliceerd: 8 april 2025

Met de clip-path eigenschap kun je de vorm van een element wijzigen door het te knippen tot een cirkel, veelhoek of zelfs een SVG-pad. Vóór Chrome 135 en Safari 18.4 moest je echter kiezen tussen responsieve veelhoeken en complexere, niet-responsieve vormen met behulp van SVG-paden. Met de nieuwe shape() functie kan een clip-path het element knippen tot een niet-veelhoekvorm die ook responsief is.

Maak een vlagvorm

Vergelijk bijvoorbeeld het maken van een vlagvorm met clip-path: path() en clip-path: shape() .

De vorm van een vlag is niet precies een veelhoek, aangezien de boven- en onderranden kubieke Bézier-curven zijn in plaats van rechte lijnen of afgeronde hoeken.

Maak de vlag aan met clip-path: path()

Een vorm zoals deze vlag kan worden weergegeven met behulp van een SVG-pad:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Om dit te verduidelijken: een SVG-pad is een reeks padopdrachten:

1. Ga naar 0, 20.
2. Buig de curve naar 100, 20, met behulp van controlepunten (25,0 en 75, 40).
3. Verticale lijn naar 80.
4. Buig de curve naar 0, 80, met behulp van controlepunten (75, 100 en 25, 50).
5. Sluit het pad (lijn naar 0,20).

Dit tekent een vlagvorm, maar alle eenheden zijn in pixels. SVG kan die pixels schalen naar een weergavevak, maar op een manier die er altijd uitziet als een geometrische schaal van de hele vorm.

Als je bijvoorbeeld de hele rechthoek wilt schalen, maar de hoogte en breedte van de rondingen op 20px wilt behouden, is SVG daarvoor niet geschikt.

Maak de vlag met shape()

Vergelijk hetzelfde resultaat met behulp van shape() . De shape-functie accepteert een reeks opdrachten, vergelijkbaar met de SVG-padopdrachten. Deze opdrachten accepteren echter CSS-lengtes en percentages, in elke CSS-eenheid.

De volgende CSS-code zet de vlag om in een shape() met procentuele eenheden:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Maak het responsief

Met het volledige scala aan beschikbare CSS-lengtes kunt u voor elke coördinaat de gewenste lengte kiezen.

Om bijvoorbeeld de volledige grootte van de vlag aan te passen aan de grootte van het element, maar de hoogte van de curve constant te houden, kunt u het volgende doen:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Voeg aangepaste eigenschappen en animaties toe.

Nu de vorm in CSS is gedefinieerd, kun je ook aangepaste eigenschappen gebruiken om de hoogte eenvoudig aan te passen:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Je kunt de CSS-eigenschap zelfs animeren met behulp van de @property descriptor en deze beperken zodat deze niet te ver doorschiet:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Probeer de demo

In Chrome 135 of Safari 18.4 kun je de animerende vlagvorm zien die is gemaakt met clip-path: shape() in deze CodePen-demo .

Samenvatting

clip-path: shape() kun je je element bijsnijden met willekeurige en responsieve vormen, iets wat voorheen alleen mogelijk was met technieken zoals kegelvormige verlopen of met JavaScript geconstrueerde SVG.

Raadpleeg de specificatie voor de volledige syntaxis.

Momenteel werkt het alleen voor clip-path . In de toekomst willen we dit soort vormen gebruiken om de vorm van de rand van een element in te stellen , wat nog meer niet-rechthoekige expressiemogelijkheden zou bieden.