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

• url(URI) als Verweis auf ein <clipPath> SVG-Element
• Grundform (inset, circle, ellipse, polygon, path). Detaillierte Beschreibungen zu den Grundformen finden Sie im Tutorial-Artikel.
• 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.
• none

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

0

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