CSS/Funktionen/rect()

Browserunterstützung
caniuse.com

Die CSS-Funktion rect() 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>

anwendbar auf

• clip-path
• offset-path

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.

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.

Siehe auch

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

Weblinks

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

Browserunterstützung
caniuse.com