CSS/Eigenschaften/clip-path
Aus SELFHTML-Wiki
< CSS | Eigenschaften(Weitergeleitet von 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
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Defaultwert
0
- anwendbar auf
alle Elemente
- 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);
}
Siehe auch
Weblinks
- Spezifikation (W3C): clip-path property
- MDN: clip-path
- Details: caniuse.com
Liste der CSS-Eigenschaften
- Positionierung und Anzeige
- Abstände
- Benutzeroberfläche
- Druckausgabe
- generierter Inhalt
- Größenangaben
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Rahmen und Schatten
- Schriftformatierung
- Textausrichtung
- Animationen