CSS/Eigenschaften/clip-path
Aus SELFHTML-Wiki
< CSS | Eigenschaften
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 |
|
---|---|
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
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