„shape()“ für responsives Zuschneiden verwenden

Noam Rosenthal

Veröffentlicht: 8. April 2025

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

Flaggenform erstellen

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

Eine Flaggenform ist nicht genau ein Polygon, da ihre oberen und unteren Ränder keine geraden Linien oder abgerundeten Ecken, sondern kubische Bézierkurven 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. Gehen Sie zu 0, 20.
2. Zeichnen Sie eine Kurve zu 100, 20 mit den Kontrollpunkten 25,0 und 75,40.
3. Vertikale Linie bis 80
4. Zeichnen Sie eine Kurve zu 0, 80 mit den Kontrollpunkten (75,100 und 25,50).
5. Schließen Sie den Pfad (Linie zu 0,20).

Dadurch wird eine Flagge gezeichnet, aber alle Einheiten sind in Pixeln. In SVG können diese Pixel auf einen View-Box skaliert werden, aber 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 die richtige Wahl.

Flag mit shape() erstellen

Vergleichen Sie dasselbe Ergebnis mit shape(). Die Funktion „shape“ akzeptiert eine Reihe von Befehlen, ähnlich wie die SVG-Pfadbefehle. Diese Befehle akzeptieren jedoch CSS-Längen und -Prozentsätze in jeder CSS-Einheit.

Im folgenden CSS-Code wird das Flag „a“ in shape() mit Prozenteinheiten 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
  );
}

Responsives Design

Sie können aus der vollständigen Palette der CSS-Längen auswählen, welche für jede Koordinate verwendet werden sollen.

Wenn Sie beispielsweise die gesamte Größe der Flagge anhand der Größe des Elements skalieren, aber die Höhe der Kurve konstant halten möchten, gehen Sie so vor:

.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 Eigenschaften 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 @property-Beschreibungselement animieren und so einschränken, dass sie nicht überreizt wird:

@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 Flaggenform sehen, die mit clip-path: shape() in dieser CodePen-Demo erstellt wurde.

Zusammenfassung

Mit clip-path: shape() können Sie Ihr Element mit beliebigen und responsiven Formen zuschneiden. Bisher war dies nur mithilfe von Techniken wie konischen Farbverläufen oder JavaScript-generierten SVG-Dateien möglich.

Die vollständige Syntax finden Sie in der Spezifikation.

Derzeit funktioniert sie nur für clip-path. In Zukunft möchten wir diese Art von Form verwenden, um die Form des Rahmens des Elements festzulegen. So könnten noch mehr nicht rechteckige Ausdrucksmöglichkeiten genutzt werden.