CSS/Funktionen/path()

Browserunterstützung
caniuse.com

Die CSS-Funktion path() beschreibt einen Pfad

anwendbar auf

• clip-path
• d
• offset-path
• shape-outside

Parameter

Syntax

path( [<'fill-rule'>,]?<string> ] , <track-list> )

• <fill-rule>: legt fest, ob die Form ganz oder nur teilweise gefüllt wird. (Siehe: fill-rule)
• string: Zeichenkette aus Punkten (Koordinaten) und Pfad-Kommandos

Beispiel

img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  clip-path: path('m 300,300 
                   l-100,-100 
                   a 50,50 90 0,1 100,-75 
                   a 50,50 90 0,1 100,75 
                   z'); 
  margin: 0;
}

Das Bild wird entsprechend der Pfadangabe zu einem Herz ausgeschnitten.

Siehe auch

• SVG/Element/path#Pfad-Kommandos - Übersicht über alle Pfadkommandos
• Masken und Beschneidungen
  path()-Funktion für Beschneidungen
• offset-path
  CSS-Animation entlang von Pfaden
• Shape-Morphing
  CSS-Animation von d: path()

Weblinks

• CSSWG.org: the path() notation
• MDN: path()

Browserunterstützung
caniuse.com