CSS/Funktionen/path()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch