CSS/Eigenschaften/clip-path

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) 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 */
  -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: Das Einbinden einer SVG-Grafik funktioniert nur im Firefox, jedoch nicht in den anderen Browsern.

Weblinks

• Spezifikation (W3C): clip-path property
• MDN: clip-path

Siehe auch

• CSS/Tutorials/Masken und Beschneidungen/clip-path