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

  path()-Funktion für Beschneidungen

   
• Pfad-Animationen

  CSS-Animation entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

   

Weblinks

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

Browserunterstützung
caniuse.com