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, 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.

Empfehlung: Die clip-path-Eigenschaft ist noch nicht in alle Browser implementiert. Verwenden Sie custom properties, um den Wert nur einmal festzulegen und dann in den zweiten Regelsatz mit Browserpräfix einzusetzen:

keine doppelte Arbeit mehr:

.img {
  --clip: polygon(0 0, 100% 0, 50% 100%, 0 100%);

  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

Weblinks

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

Siehe auch

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