clip-path

Die clip-path Eigenschaft in CSS erlaubt es Ihnen, einen bestimmten Bereich eines Elements anzugeben, der angezeigt werden soll, während der Rest verborgen (oder "abgeschnitten") wird.

.clip-me {  
  
  /* Example: clip away the element from the top, right, bottom, and left edges */
  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  
  /* Example: clip element into a Heptagon */
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);


  /* Deprecated version */
  position: absolute; /* absolute or fixed positioning required */
  clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
  /* values descript a top/left point and bottom/right point */
} 

Es gab früher eine clip Eigenschaft, aber beachten Sie, dass diese veraltet ist.

Der häufigste Anwendungsfall wäre ein Bild, aber es ist nicht darauf beschränkt. Sie könnten genauso gut clip-path auf ein Absatz-Tag anwenden und nur einen Teil des Textes anzeigen.

<img class="clip-me" src="/images/image-to-be-clipped.png" alt="Descriptioin of image">

<p class="clip-me">
  I'll be clipped.
</p>

Diese vier Werte in inset() (im obigen CSS) repräsentieren den **oben/links** Punkt und den **unten/rechts** Punkt, die das sichtbare Rechteck bilden. Alles außerhalb dieses Rechtecks ist verborgen.

Andere mögliche Werte

.clip-me { 

  /* referencing path from an inline SVG  */
  clip-path: url(#c1); 

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

Beispiel für SVG-Clip-Pfad

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>

Es ist sehr seltsam, dass clip-path die path() Funktion nicht von Anfang an unterstützte, da path() bereits für Eigenschaften wie motion-path existiert. Firefox unterstützt sie inzwischen, und wir warten auf die restlichen Browser. Siehe Eine erste Implementierung von clip-path: path();

Erstellen Sie Ihre eigenen

Bis wir path() zuverlässig verwenden können, sind die nützlichsten Schnitte für schicke benutzerdefinierte Formen polygon(). Hier ist ein wirklich schöner Editor dafür von Mads Stoumann (der auch für Kreise und Ellipsen funktioniert)

Weitere Informationen

• Clipping und Masking in CSS
• clip-path auf WPD
• clip-path auf MDN
• Clippy: Bennett Feelys clip-path Maker
• Clipping und Masking auf MDN
• Die (veraltete) CSS Clip Eigenschaft (Impressive Webs)
• Spezifikation zu CSS Masking
• CSS Masking von Dirk Schulze
• Clipping in CSS und SVG – Die clip-path Eigenschaft und das Element von Sara Soueidan
• Pens mit dem Tag clip-path auf CodePen
• Demos und Browser-Support-Demo Pen von Yoksel
• SVG Masks von Jakob Jenkov
• Alan Greenblatts Forschung zum Browser-Support-Level für Clipping- und Masking-Funktionen

Browser-Unterstützung