CSS/Eigenschaften/clip-path

Browserunterstützung
caniuse.com

Die Eigenschaft clip-path ermöglicht es, festzulegen, dass nicht die gesamte Box des Elementes dargestellt wird. Dabei sind, anders als bei der Vorgänger-Eigenschaft clip auch andere Formen als Rechtecke möglich. Diese Beschneidungspfade werden als Grundformen oder SVG-Grafik definiert

Erlaubte Werte

• none: (Standardwert) Bild wird nicht zugeschnitten, sondern normal dargestellt
• Grundform
  • inset(): legt als Beschneidungskontur ein Rechteck fest. Im Gegensatz zur rect()-Funktion geben die Argumente für inset() an, welchen Abstand die Kante des Beschneidungsrechtecks von der entsprechenden Kante der Referenzbox haben soll.
    • 1-4 Längenangaben oder Prozentangaben, um wieviel die Seiten eingerückt werden sollen. Werden weniger als 4 Werte notiert, erfolgt die Zuordnung der fehlenden Werte analog zur margin-Eigenschaft.
    • optional kann das Schlüsselwort round und 1-4 Werte für Eckradien folgen, analog zur Eigenschaft border-radius.
    • Sind die Eckradien so groß, dass sich die Abrundungen überschneiden würden, werden ihre Werte proportional so weit verkleinert, dass die Überschneidung nicht mehr vorkommt.
  • rect(): (experimentell) legt als Beschneidungskontur ein Rechteck so wie in der clip-Eigenschaft fest. Eine Angabe von Eckradien ist möglich.
  • xywh(): (experimentell) legt als Beschneidungskontur ein Rechteck fest, wie man es mit einem rect-Element in SVG tun würde: x und y Koordinate der oberen linken Ecke sowie Breite und Höhe. Eine Angabe von Eckradien ist möglich.
    
  • circle(): legt als Beschneidungskontur einen Kreis fest
    • eine optionale Angabe für den Kreisradius. Das kann eine Längenangabe, eine SVG-Prozentangabe oder eins der Schlüsselwörter closest-side oder farthest-side sein.
      • closest-side bedeutet, dass der Kreisradius dem Abstand vom Kreismittelpunkt zur nächstgelegenen Kante der Referenzbox sein soll, und farthest-side meint den Abstand zur am weitesten entfernten Kante der Referenzbox.
      • closest-side ist der Standardwert.
    • optional gefolgt vom Schlüsselwort at und zwei Angaben für die x- und y-Koordinaten des Kreismittelpunkts. Dies können Längenangaben, SVG-Prozentangaben oder die Schlüsselwörter top, bottom, left, right und center sein, so wie in der CSS Eigenschaft background-position definiert. Standardwert center.
  • ellipse(): legt als Beschneidungskontur eine Ellipse fest
    • 2 Angaben für den x- und y-Radius der Ellipse. Im Übrigen gelten die gleichen Hinweise wie bei circle().
    • optional gefolgt vom Schlüsselwort at und zwei Angaben für die x- und y-Koordinaten des Kreismittelpunkts, so wie bei circle().
  • polygon(): legt als Beschneidungskontur ein Polygon (Vieleck) fest
    • optional kann als erstes Argument eine fill-rule angegeben werden.
    • beliebig viele, durch Komma getrennte Koordinatenpaare. Das Polygon wird automatisch durch eine Verbindungslinie vom letzten zum ersten Koordinatenpaar geschlossen.
  • path(): legt als Beschneidungskontur einen SVG-Pfad fest
• url(URI) als Verweis auf ein clipPath-SVG-Element
• Geometriebox mit CSS-Bezug (margin-box, border-box, padding-box, content-box) oder mit SVG-Bezug (fill-box, stroke-box, view-box). Wird keine Geometriebox angegeben, wird border-box verwendet.
  • fill-box bezieht sich auf den Bereich eines SVG-Elements, der die reine Objektgeometrie ohne Rand oder Dekorationen enthält
  • stroke-box ist die fill-box plus den Bereich für die Randlinie
  • view-box benutzt den nächstgelegenen SVG Viewport als Referenzbox.
  • SVG-Elemente ohne CSS Layoutbox interpretieren content-box und padding-box wie fill-box, sowie border-box und margin-box wie stroke-box.
  • Elemente mit einer CSS Layoutbox interpretieren fill-box wie content-box, und stroke-box und view-box wie border-box.
• Grundform UND Geometriebox - die Geometriebox stellt dann die Referenzbox für die Grundform dar.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

ja (für basic-shape)

Beispiel

.clip-rect {
  /* Rechteck */
  clip-path: inset(100px 110px 200px 100px);
}
.clip-circle {
  /* Kreis */
  clip-path: circle(30px at 35px 35px);
}
.clip-ellipse {
  /* Ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);
}
.clip-poly {
  /* unregelmäßige Form */
  clip-path: polygon(75px 150px,-4px 150px,60px 203px,26px 288px,120px 
   248px,206px 298px,177px 211px,239px 150px,158px 150px,122px 36px,77px 150px);
}

 

Empfehlung: Die clip-path-Eigenschaft ist mittlerweile in allen modernen Browsern implementiert. Auf eine doppelte Notation mit Browserpräfix können Sie verzichten. Auch die path()-Funktion ist mittlerweile überall angekommen.

Siehe auch

• clip-path Tutorial

Weblinks

• Spezifikation (W3C): clip-path property
• MDN: clip-path
• Details: caniuse.com