CSS/Funktionen/rect()

Die rect()-Funktion erzeugt ein Rechteck mit dem angegebenen Abstand zum oberen und linken Rand des enthaltenen Blocks. Es handelt sich um eine grundlegende Formfunktion des Datentyps <basic-shape>.

Parameter	Syntax rect( <'offset'> <'offset'> <'offset'> <'offset'> [round <'border-radius'>]) vier Offset-Werte, beginnend mit dem Offset der oberen Kante und im Uhrzeigersinn, Jeder Versatzwert kann entweder eine Längenangabe, ein Prozentwert oder das Schlüsselwort auto sein. einem optionalen Schlüsselwort round mit dem Parameter border-radius, um dem Rechteck abgerundete Ecken hinzuzufügen.
anwendbar auf	* clip-path offset-path
Browsersupport	caniuse: {{{caniuse}}}

Beispiel

offset-path: rect(0 1% auto 3% round 0 1px);
clip-path: rect(50px 70px 80% 20%);

Das Bild wird entsprechend der rect()-Funktion beschnitten.

Weblinks

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

Browserunterstützung
caniuse.com

Siehe auch

• Masken und Beschneidungen
  rect()-Funktion für Beschneidungen
• offset-path
  CSS-Animation entlang von Pfaden
• SVG/Element/rect