Referenz:CSS/Eigenschaften/clip-path

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft clip-path CSS 3.0
Beschreibung Die CSS-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)
  • none
  • inherit
default-Wert

0

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Leer
Spezifikation W3c logo klein.gif clip-path property
Beispiel
.clip-rect {
  /* Rechteck */
  -webkit-clip-path: inset(100px 110px 200px 100px );
  clip-path: inset(100px 110px 200px 100px);
}
.clip-circle {
  /* Kreis */
  -webkit-clip-path: circle(35px at 135px 50px);
  clip-path: circle(30px at 35px 35px);
}
.clip-ellipse {
  /* Ellipse */
  -webkit-clip-path: ellipse(65px 30px at 125px 240px); 
  clip-path: ellipse(65px 30px at 125px 40px);
}
.clip-poly {
  /* unregelmäßige Form */
  -webkit-clip-path: polygon(75px 150px,-4px 150px,60px 203px,26px 288px,120px 
   1248px,206px 298px,77px 211px,239px 150px,158px 150px,122px 36px,77px 150px);
  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 der Grundformen funktioniert nicht im Firefox; das Einbinden einer SVG-Grafik funktioniert nur im Firefox, jedoch nicht in den anderen Browsern.

Tipp