Gebruik shape() voor responsief knippen

bookmark_border Stay organized with collections Save and categorize content based on your preferences.

Noam Rosenthal

Gepubliceerd: 8 april 2025

Met de eigenschap clip-path kunt u de vorm van een element wijzigen door naar een cirkel, polygoon of zelfs een SVG-pad te knippen. Vóór Chrome 135 en Safari 18.4 moest je echter kiezen tussen responsieve polygonen en complexere vormen die niet responsief zijn met behulp van SVG-paden. Met de nieuwe functie shape() kan een clip-path het element knippen naar een niet-polygoonvorm 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 bepaald een veelhoek, aangezien de boven- en onderranden kubusvormige Bézier-curven zijn in plaats van rechte lijnen of afgeronde hoeken.

Maak de vlag met clip-path: path()

Een vorm als 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 op te splitsen: een SVG-pad bestaat uit een reeks padopdrachten:

1. Ga naar 0, 20.
2. Curve naar 100, 20, met behulp van controlepunten (25,0 en 75, 40).
3. Verticale lijn naar 80.
4. 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 weergavevenster, maar op een manier die er altijd uitziet als een geometrische schaal van de hele vorm.

Als u bijvoorbeeld de hele rechthoek wilt schalen, maar de hoogte en breedte van de curven 20px wilt behouden, zou SVG niet geschikt zijn voor deze taak.

Maak de vlag met shape()

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

De volgende CSS converteert de vlag naar 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 kiezen welke u voor elke coördinaat wilt gebruiken.

Als u bijvoorbeeld de volledige grootte van de vlag wilt schalen op basis van de grootte van het element, maar de hoogte van de curve constant wilt 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, kunt u ook aangepaste eigenschappen gebruiken, zodat u de hoogte gemakkelijk kunt manipuleren:

.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
  )
}

U kunt de CSS-eigenschap zelfs animeren met behulp van de @property -descriptor, en deze vastklemmen zodat deze niet te ver reikt:

@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 kunt u in deze CodePen-demo de animatievlagvorm zien die is gemaakt met clip-path: shape()

Samenvatting

clip-path: shape() laat je je element knippen met behulp van willekeurige en responsieve vormen, voorheen alleen mogelijk met technieken zoals conische gradiënten of JavaScript-geconstrueerde SVG.

Controleer de specificatie voor de volledige syntaxis.

Op dit moment werkt het alleen voor clip-path . In de toekomst willen we dit soort vorm gebruiken om de vorm van de rand van het element vast te stellen , wat nog meer niet-rechthoekige manieren van expressie zou ontsluiten.