CSS/Funktionen/path()

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

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;
}

Siehe auch

• Pfad-Kommandos

  - Übersicht über alle Pfadkommandos

   
• Pfade in SVG

  Einführung mit vielen Beispielen

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