Zusammenfassung zur Nutzung der neuen `shape()`-Funktion in CSS

• Die CSS-Funktion shape() wird nun in Browsern auf Basis von Chromium und WebKit unterstützt
• Anders als bei path() lassen sich damit komplexe Formen definieren – mit besser lesbarer CSS-Syntax und Einheiten
• Beim Erstellen komplexer Formen mit clip-path ist eine Umsetzung auf Basis englischer Befehle statt SVG-Koordinaten möglich
• Mit neuen Befehlen wie line, arc und curve lassen sich Linien, Kurven und Bögen kompakt formulieren
• shape() unterstützt derzeit Animationen nur eingeschränkt, aber dynamische Änderungen als Reaktion auf hover/focus sind möglich

---

Überblick

• Die CSS-Funktion shape() wird zusammen mit clip-path verwendet und ermöglicht komplexes Clipping von Formen im Browser
• Bisher waren Grundformen wie circle, ellipse oder polygon möglich, frei definierbare Formen aber nur mit path()
• Bei path() müssen SVG-Koordinaten und -Befehle direkt eingegeben werden, was Lesbarkeit und Lernaufwand verschlechtert

Eigenschaften der shape()-Funktion

• Vektorformen lassen sich auf CSS-typische Weise aufbauen
• Der Startpunkt wird mit Richtungs-Keywords (from top left) oder Koordinatenwerten (from 0 0) festgelegt
• Die Form besteht aus einer Folge von Befehlen, z. B. line, vline, arc, curve, smooth

Erklärung der wichtigsten Befehle

• line
  • Bedeutung: Zeichnet eine Linie vom Startpunkt aus
  • Verwendung: Relative Position mit dem Keyword by angeben
  • Beispiel: line by -2px 3px
• vline
  • Bedeutung: Zeichnet eine vertikale Linie
  • Verwendung: Absolute Position mit to, relative Position mit by angeben
  • Beispiel: vline to 50px
• hline
  • Bedeutung: Zeichnet eine horizontale Linie
  • Verwendung: Absolute Position mit to, relative Position mit by angeben
  • Beispiel: hline to 95%
• arc
  • Bedeutung: Zeichnet eine elliptische Kurve
  • Verwendung:
    • to: Endpunkt des Bogens
    • with: Neigungsrichtung des Bogens (horizontal/vertikal)
    • of: Radius der Ellipse, zu der der Bogen gehört (horizontal/vertikal)
  • Beispiel: arc to 10% 50% of 1%
• curve
  • Bedeutung: Zeichnet eine Bézier-Kurve
  • Verwendung:
    • to: Endpunkt der Kurve
    • with: Kontrollpunkt der Kurve (zur Steuerung der Krümmung)
  • Beispiel: curve to 0% 100% with 50% 0%
• smooth
  • Bedeutung: Zeichnet eine glatte Kurve (verbundene Bézier-Kurve)
  • Verwendung:
    • to: Endpunkt
    • by: relative Koordinate
    • with: Kontrollpunkt

Sonstiges

• shape() kann dynamisch in hover-/focus-Zuständen verändert werden
• In aktuellen Browsern funktionieren transition-Animationen derzeit nicht
• Auch die Berechnungsfunktion calc() kann verwendet werden

Referenzlinks

• Offizielle Spezifikation