„shape()“ für responsives Zuschneiden verwenden

Noam Rosenthal

Veröffentlichung: 8. April 2025

Mit der Eigenschaft clip-path können Sie die Form eines Elements ändern, indem Sie es auf einen Kreis, ein Polygon oder sogar einen SVG-Pfad zuschneiden. Vor Chrome 135 und Safari 18.4 mussten Sie sich jedoch zwischen responsiven Polygonen und komplexeren Formen entscheiden, die keine responsiven SVG-Pfade verwenden. Mit der neuen Funktion shape() kann ein clip-path das Element auf eine nicht polygonale Form zuschneiden, die auch responsiv ist.

Flaggenform erstellen

Vergleichen Sie beispielsweise das Erstellen einer Flaggenform mit clip-path: path() und clip-path: shape().

Eine Flagge ist nicht genau ein Polygon, da ihre oberen und unteren Ränder kubische Bézierkurven und keine geraden Linien oder abgerundeten Ecken sind.

Flag mit clip-path: path() erstellen

Eine Form wie diese Flagge kann mit einem SVG-Pfad dargestellt werden:

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

Ein SVG-Pfad besteht aus einer Reihe von Pfadbefehlen:

1. Verschiebe dich zu 0, 20.
2. Kurve zu 100, 20 mit den Kontrollpunkten (25,0 und 75, 40).
3. Senkrechte Linie bis 80.
4. Kurve zu 0, 80 mit den Kontrollpunkten (75,100 und 25,50).
5. Schließen Sie den Pfad (Linie zu 0,20).

Damit wird eine Flagge gezeichnet, aber alle Einheiten sind in Pixeln angegeben. SVG kann diese Pixel auf ein Viewbox skalieren, aber nur so, dass es immer wie eine geometrische Skalierung der gesamten Form aussieht.

Wenn Sie beispielsweise das gesamte Rechteck skalieren, aber die Höhe und Breite der Kurven bei 20 Pixeln beibehalten möchten, ist SVG nicht geeignet.

Flag mit shape() erstellen

Vergleichen Sie dasselbe Ergebnis mit shape(). Die Formfunktion akzeptiert eine Reihe von Befehlen, ähnlich den SVG-Pfadbefehlen. Diese Befehle akzeptieren jedoch CSS-Längen und ‑Prozentsätze in beliebigen CSS-Einheiten.

Mit dem folgenden CSS wird das Flag in shape() mit Prozentangaben umgewandelt:

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

Responsiv gestalten

Da alle CSS-Längen verfügbar sind, können Sie für jede Koordinate die gewünschten Längen auswählen.

Wenn Sie beispielsweise die gesamte Größe der Flagge an die Größe des Elements anpassen, aber die Höhe der Kurve konstant halten möchten, können Sie Folgendes tun:

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

Benutzerdefinierte Attribute und Animationen hinzufügen

Da die Form jetzt in CSS definiert ist, können Sie auch benutzerdefinierte Eigenschaften verwenden, um die Höhe einfach zu ändern:

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

Sie können die CSS-Eigenschaft sogar mit dem Deskriptor @property animieren und so begrenzen, dass sie nicht zu weit geht:

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

Demo ansehen

In Chrome 135 oder Safari 18.4 können Sie die animierte Flagge, die mit clip-path: shape() erstellt wurde, in dieser CodePen-Demo sehen.

Zusammenfassung

Mit clip-path: shape() können Sie Ihr Element mit beliebigen und responsiven Formen zuschneiden. Bisher war dies nur mit Techniken wie konischen Verläufen oder mit JavaScript erstellten SVGs möglich.

Die vollständige Syntax finden Sie in der Spezifikation.

Derzeit funktioniert es nur für clip-path. In Zukunft möchten wir diese Art von Form verwenden, um die Form des Elementrahmens festzulegen. Dadurch wären noch mehr nicht rechteckige Ausdrucksformen möglich.