CSS/Funktionen/path()

Die path()-Funktion beschreibt einen Pfad.

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
anwendbar auf	* clip-path d offset-path shape-outside
Browsersupport	caniuse: {{{caniuse}}}

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.

Weblinks

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

Browserunterstützung
caniuse.com

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()