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

• 

  Pfad-Kommandos

  - Übersicht über alle Pfadkommandos

   
• 

  Masken und Beschneidungen

  path()-Funktion für Beschneidungen

   
• Pfad-Animationen

  CSS-Animation entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

   
• Shape-Morphing

  CSS-Animation von d: path()

   

Weblinks

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

Browserunterstützung
caniuse.com