CSS/Eigenschaften/clip-path

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • URI
  • Grundform (rect, circle, ellipse, polygon, path)
  • none
  • inherit
  • Vererbung steuernde Werte inherit, initial, unset und revert
  • Defaultwert: 0
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar ja (für basic-shape)
Beispiel
.clip-rect {
  /* Rechteck */
  -webkit-clip-path: inset(100px 110px 200px 100px );
  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);
}
 
Beachten Sie: Die Angabe einer path()-Funktion funktioniert (Stand: Februar 2021) nur im Firefox, Chrome und Opera.

Weblinks

Siehe auch