<shape>

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Der <shape> CSS Datentyp definiert die spezifische Form (Shape) einer Region. Die Region stellt den Teil eines Elements dar, auf den die clip-Eigenschaft angewendet wird.

Note: <shape> und rect() funktionieren in Kombination mit clip, das zugunsten von clip-path veraltet ist. Verwenden Sie, wenn möglich, clip-path und den Datentyp <basic-shape>.

Syntax

Der <shape>-Datentyp wird mithilfe der rect()-Funktion definiert, die eine Region in Form eines Rechtecks erzeugt.

rect()

css
rect(top, right, bottom, left)

Werte

Ein Diagramm, das oben, rechts, unten und links zeigt, wie unten beschrieben. Diese Werte definieren die Form des Rechtecks. Die obere linke Ecke wird durch die Werte oben und links definiert. Die untere rechte Ecke wird durch die Werte unten und rechts definiert.

top

Ist eine <length>, die den Versatz für die Oberseite des Rechtecks relativ zur oberen Begrenzung des Elementrahmens darstellt.

Ist eine <length>, die den Versatz für die rechte Seite des Rechtecks relativ zur linken Begrenzung des Elementrahmens darstellt.

bottom

Ist eine <length>, die den Versatz für die Unterseite des Rechtecks relativ zur oberen Begrenzung des Elementrahmens darstellt.

left

Ist eine <length>, die den Versatz für die linke Seite des Rechtecks relativ zur linken Begrenzung des Elementrahmens darstellt.

Interpolation

Wenn animiert, werden die Werte des <shape>-Datentyps über ihre top-, right-, bottom- und left-Komponenten interpoliert, wobei jede als reale, gleitende Kommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene Easing-Funktion bestimmt.

Beispiel

Beispiel, das die korrekte Verwendung der rect()-Funktion zeigt

css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}

Spezifikationen

Specification
Cascading Style Sheets Level 2
# value-def-shape

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<shape>
Deprecated
rect()
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

Siehe auch

  • Verwandte CSS-Eigenschaft: clip