CSS clip-path Eigenschaft

Definition und Verwendung

Das clip-path-Attribut ermöglicht es Ihnen, Elemente auf Grundformen oder SVG-Quellen zu schneiden.

Anmerkung:clip-path wird den abgestürzten clip-Attribut ersetzen.

Schneiden Sie das Bild in einen 50%-igen Kreis:

img {
  clip-path: circle(50%);
}

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Wert	Beschreibung
clip-source	Definieren Sie die URL, die auf das SVG <clipPath>-Element verweist.
basic-shape	Schneiden Sie den Element auf eine Grundform zu: Kreis, Ellipse, Polygon oder Stern.
margin-box	Verwenden Sie den Abstandsumrandungsbereich (margin bounding box) als Referenzrahmen.
border-box	Verwenden Sie den Umrandungsbereich (border bounding box) als Referenzrahmen.
padding-box	Verwenden Sie den Aus蒜片umrandungsbereich (padding bounding box) als Referenzrahmen.
content-box	Verwenden Sie den Inhaltsumrandungsbereich (content box) als Referenzrahmen.
fill-box	Verwenden Sie den Objektumrandungsbereich (object bounding box) als Referenzrahmen.
stroke-box	Verwenden Sie den Stiftumrandungsbereich (stroke bounding box) als Referenzrahmen.
view-box	Verwenden Sie den SVG-Bereich als Referenzrahmen.
none	Standardwert. Es wird keine clipping-pfad erstellt.

Standardwert:	none
Vererbung:	Nein
Animationserstellung:	Unterstützt (nur der Wert basic-shape). Siehe auch:Animationsspezifische Eigenschaften.
Version:	CSS Masking Module Level 1
JavaScript-Syntax:	object.style.clipPath="circle(50%)"

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Chrome	IE / Edge	Firefox	Safari	Opera
55.0 23.0 -webkit-	79.0*	54.0	9.1 6.1 -webkit-	42.0 15.0 -webkit-

Edge unterstützt clip-path nur auf SVG-Elementen (HTML-Elemente werden nicht unterstützt).