CSS/Eigenschaften/Anzeige/clip-path

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.

• 
• 
• 
• 
• 

Details: caniuse.com

Der Titel dieses Artikels ist mehrdeutig. Das gleichnamige SVG-Element finden Sie unter: SVG/clipPath.

Hinweis

Wenn Sie im Internet Code-Beispiele mit der Eigenschaft

• clip-path: circle(50%, 50%, 50%); finden, dann ist dieser Code veraltet.

Code nach der neuen, gültigen Spezifikation kann man durch:

• clip-path: circle(50% at 50% 50%); erkennen.

Grundformen (basic shapes)

Als Wert für die clip-path-Eigenschaft können Sie Grundformen festlegen.

• 
• 
• 
• 
• 

Beispiel ansehen …

.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 248px, 206px 298px,
                             177px 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);
}
img:hover {                                            
  -webkit-clip-path: none;
  clip-path: none;
}

ansehen …

Folgende Angaben sind möglich:

• none: (Standardwert) Bild wird nicht zugeschnitten, sondern normal dargestellt
• inset: zeichnet ein Rechteck
  • 4 Angaben um wieviel die Seiten eingerückt werden sollen,
  • 2 optionale Angaben für einen (horizontalen und vertikalen) border-Radius
• circle: zeichnet einen Kreis
  • 1 Angabe für die Größe des Kreisradius
  • das Schlüsselwort at,
  • gefolgt von 2 Angaben für die x- und y-Koordinaten des Mittelpunkts
• ellipse: zeichnet eine Ellipse
  • 2 Angaben für die Größe der Ellipse
  • das Schlüsselwort at
  • gefolgt von 2 Angaben für die x- und y-Koordinaten des Mittelpunkts
• polygon: zeichnet ein Vieleck
  • beliebig viele, durch Komma getrennte Koordinatenpaare

Referenz-Box des Zuschneide-Pfads

Diese Angaben können durch die optionale Angabe der Geometrie-Box, in dem das Zuschneiden stattfinden soll, erweitert werden. Diese Geometrie-Box wird nur für CSS-Formen als Zuschneidepfade festgelegt. Das Element clipPath in SVG verwendet die border box des HTML-Elements als Referenz.

Wenn das zugeschnittene Element ein HTML-Element ist sind folgende Schlüsselwerte möglich:

• margin-box
• border-box
• padding-box
• content-box

Wenn die Grundformen mit clip-path auf ein SVG-Element angewandt werden, kann die Geometriebox folgende Werte annehmen:

• fill-box
• stroke-box
• view-box – falls keine viewBox festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.

Beachten Sie: Dieses Beispiel funktioniert (Stand: Juni 2016) nur in den Webkit-Browsern. Firefox benötigt hierfür SVG-Shapes.
Die Angabe eines Radius für abgerundete Ecken funktioniert noch nicht.

Referenzieren einer SVG-Grafik

Alternativ können Sie in SVG ein clipPath-Element mit polygonalen Koordinaten definieren und über CSS einbinden. Sara Soueidan zeigt viele Beispiele und Anregungen, wie Bilder und selbst Texte als Formen zum Zuschneiden von Bildern verwendet werden können.

• 
• 
• 
• 
• 

Beispiel ansehen …

.clip-poly{
  -webkit-clip-path: url("#clipPolygon");
  clip-path: url("#clipPolygon");
}

<img class="clip-poly" src="Celsius.jpg" alt="Anders Celsius">

<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="75 150,0 150,60 203,26 288,120 248,206 298,177 211,239 150,158 150,122 36,77 150">
    </polygon>
  </clipPath>
</svg>

ansehen …

Beachten Sie: Dieses Beispiel funktioniert (Stand: Juni 2016) in den Webkit-Browsern nicht, da diese noch keine Formen in externen SVG-Elementen unterstützen.

Anwendungsbeispiel

Zusammenspiel von clip-path und shape-outside

In diesem Beispiel wird ein Bild mit clip-path beschnitten und der Text umfließt dann das beschnittene Bild durch eine Festlegung mit shape-outside.

• 
• 
• 
• 
• 

Beispiel ansehen …

img {
  float: left;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
  shape-outside: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
}

img:hover {
    shape-outside:polygon(0% 0%, 100% 0, 0% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);
  }

Wenn Sie mit der Maus über das Bild fahren, verändert sich der mit clip-path festgelegte Bildausschnitt sowie der mit shape-outside definierte Textumfluss.

ansehen …

Browsersupport

Achtung!

Die Eigenschaft clip-path ist derzeit (Stand: Juni 2016) nur in den Browser Firefox implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

für Chrome, Opera und Safari

• -webkit-clip-path

Firefox unterstützt nur die url()-Referenz, ab FF47 können Sie die layout.css.clip-path-shapes.enabled Flag setzen.

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Weblinks

• W3C: Clipping Shape: the clip-path property
• MDN: clip-path

Generator

• cssplant.com: clip-path-generator zur Erzeugung von Polygonen

Artikel

• drweb.de: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path (Achtung: die Werte zu den Beschneidungs-Angaben sind fehlerhaft!)
• css-tricks: clip-path
• sitepoint: Introducing the CSS clip-path Property vom 02.06.2016