CSS/Funktionen/shape()

Browserunterstützung
caniuse.com

Die CSS-Funktion shape() wird verwendet, um eine Form vom Datentyp <basic-shape> zu definieren. Sie kombiniert einen Anfangspunkt mit einer Reihe von Formbefehlen, die den Pfad der Form definieren.

anwendbar auf

• clip-path
• offset-path

Beispiel

/* <move-command>, <line-command>, and close */
offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close);

/* <hvline-command> */
offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem);

/* <curve-command> */
offset-path: shape(
  from 10px 10px,
  curve to 80px 80px with 160px 1px / 20% 16px
);

/* <smooth-command> */
offset-path: shape(from 10px 10px, smooth to 100px 50pt);

 

Weblinks

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