clip-path

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
clip-path: xywh(0 5px 100% 75% round 15% 0);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

Die clip-path-Eigenschaft wird als einer oder eine Kombination aus den unten aufgeführten Werten angegeben.

<clip-source>

Ein <url>, das auf ein SVG <clipPath> Element verweist.

<basic-shape>

Eine Form, deren Größe und Position durch den <geometry-box>-Wert definiert ist. Wenn keine Geometrie-Box angegeben ist, wird die border-box als Referenzbox verwendet. Eine der folgenden Formen:

inset()

Definiert ein eingezogenes Rechteck.

circle()

Definiert einen Kreis mit einem Radius und einer Position.

ellipse()

Definiert eine Ellipse mit zwei Radien und einer Position.

polygon()

Definiert ein Polygon mit einer SVG-Füllregel und einer Reihe von Eckpunkten.

path()

Definiert eine Form mit einer optionalen SVG-Füllregel und einer SVG-Pfaddefinition.

rect()

Definiert ein Rechteck anhand der angegebenen Abstände von den Rändern der Referenzbox.

shape()

Definiert eine Form mit einer optionalen SVG-Füllregel und Formkommandos für Linien, Kurven und Bögen.

xywh()

Definiert ein Rechteck mittels der angegebenen Abstände von den oberen und linken Rändern der Referenzbox sowie der angegebenen Breite und Höhe des Rechtecks.

<geometry-box>

Wenn in Kombination mit einer <basic-shape> angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn nur dieser angegeben ist, bewirkt er, dass die Kanten der angegebenen Box, einschließlich aller Eckenformungen (wie z. B. ein border-radius), der Clipping-Pfad sind. Die Geometrie-Box kann einen der folgenden Werte haben:

margin-box

Verwendet die Margin-Box als Referenzbox.

border-box

Verwendet die Border-Box als Referenzbox.

padding-box

Verwendet die Padding-Box als Referenzbox.

content-box

Verwendet die Content-Box als Referenzbox.

fill-box

Verwendet die Umrandungsbox des Objekts als Referenzbox.

stroke-box

Verwendet die Umrandungsbox des Strichs als Referenzbox.

view-box

Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn ein viewBox Attribut für das Element angegeben ist, das den SVG-Viewport erstellt, wird die Referenzbox an der Herkunft des Koordinatensystems positioniert, das durch das viewBox-Attribut festgelegt wird, und die Dimension der Größe der Referenzbox wird auf die Breite und Höhe des viewBox-Attributs eingestellt.

none

Kein Clipping-Pfad wird erstellt.

clip-path = 
  <clip-source>                        |
  [ <basic-shape> || <geometry-box> ]  |
  none                                 

<clip-source> = 
  <url>  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<url> = 
  <url()>  |
  <src()>  

<shape-box> = 
  <visual-box>  |
  margin-box    

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

In diesem Beispiel werden zwei Dreiecke erstellt, indem ein polygon() als Clipping-Pfad auf <div>-Elementen definiert wird. Jedes hat einen einfarbigen Hintergrund und eine dicke border. Das zweite <div>-Element hat seine Referenzbox auf content-box gesetzt:

HTML

<div></div>
<div></div>

CSS

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
}

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-color: rebeccapurple;
  border: 20px solid magenta;

  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

div:last-of-type {
  clip-path: content-box polygon(50% 0, 100% 100%, 0 100%);
}

Ergebnisse

Für das erste Dreieck haben wir keine Referenzbox angegeben; daher wird standardmäßig border-box verwendet, wobei die Positionen 0% und 100% sich am äußeren Rand des Rahmens befinden. Beim zweiten Beispiel haben wir die <geometry-box> auf content-box gesetzt, was bedeutet, dass die Referenzbox für die Grundform der äußere Rand des Inhaltsbereichs ist, der sich innerhalb der Padding-Box befindet. Da unser Beispiel kein padding hat, ist dies der innere Rand des Rahmens.

Vergrößern wir das vorherige Beispiel, erstellen wir dasselbe Dreieck mit unterschiedlichen <basic-shape> Werten und zeigen, wie die shape()- und path()-Funktionen auch verwendet werden können, um Clipping-Pfade zu erstellen, wobei shape() eine flexiblere Lösung darstellt.

Wir verwenden path(), um den Clipping-Pfad des ersten Elements zu definieren, und shape() für das zweite, beide verwenden die Standard-Referenzbox border-box:

div {
  clip-path: path("M100 0 L200 200 L0 200 Z");
}

div:last-of-type {
  clip-path: shape(from 50% 0, line to 100% 100%, line to 0 100%, close);
}

Infolgedessen wächst der mit der shape() Funktion definierte Pfad mit dem Element, während die path() Version dies nicht tut:

Da die shape()-Funktion die Verwendung von <percentage>-Werten (und benutzerdefinierte Eigenschaften auch) ermöglicht, ist sie robuster.

Wir demonstrieren dies, indem wir die Größe des darunter liegenden Elements vergrößern:

div {
  width: 250px;
  height: 250px;
}

Die Sichtbarkeit oder zumindest partielle Sichtbarkeit der vier Randseiten im Beispiel des Clipping-Pfades, der durch die shape() Funktion definiert ist, ist darauf zurückzuführen, dass die Prozentwerte den Pfad mit dem Element wachsen lassen. In der path() Version wuchs das Element, aber nicht die Form. Infolgedessen sind die oberen und linken Ränder teilweise sichtbar, während die rechten und unteren Ränder ausgeblendet sind.

In diesem Beispiel definieren wir SVG <clipPath> Elemente zu verwenden als clip-path Quelle.

HTML

Wir fügen zwei <div> Elemente und ein <svg> Element ein, das zwei <clipPath> Elemente enthält. Ein <clipPath> enthält vier <rect> Elemente, die zusammen Fensterscheiben definieren und in der Mitte ein Kreuz aus leerem Raum lassen, und das andere enthält zwei kreuzende <rect> Elemente.

<svg height="0" width="0">
  <defs>
    <clipPath id="window">
      <rect y="0" x="0" width="80" height="80" />
      <rect y="0" x="120" width="80" height="80" />
      <rect y="120" x="0" width="80" height="80" />
      <rect y="120" x="120" width="80" height="80" />
    </clipPath>
    <clipPath id="cross">
      <rect y="0" x="80" width="40" height="200" />
      <rect y="80" x="0" width="200" height="40" />
    </clipPath>
  </defs>
</svg>

<div class="window">Window</div>
<div class="cross">Cross</div>

CSS

Wir verwenden flexbox, um unsere Elemente nebeneinander mit einem Zwischenraum anzuordnen, wenn Platz verfügbar ist. Wir definieren ein conic-gradient() Hintergrundbild auf beiden <div> Elementen, um ein interessantes visuelles Element zum Clippen zu bieten, zusammen mit einer border.

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  font: 2em sans-serif;
}

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(
    at center,
    rebeccapurple,
    green,
    lightblue,
    rebeccapurple
  );

  border: 5px solid;
  box-sizing: border-box;
}

Dann setzen wir die id des <clipPath> als <clip-source>. Wir zentrieren den Text im cross Beispiel vertikal mit align-content, da der Text sonst abgeschnitten wird, wie es im window Beispiel der Fall ist.

.window {
  clip-path: url(#window);
}

.cross {
  clip-path: url(#cross);
  align-content: center;
}

Ergebnisse

Die Elemente, einschließlich ihres Rahmens und Textes, werden ausgeschnitten, wobei nur die Teile, die die <clipPath> Elemente überlappen, auf der Seite gezeichnet werden.

Dieses Beispiel demonstriert die verschiedenen Werte der clip-path Eigenschaft, die ein HTML <img> ausschneiden.

HTML

Das HTML enthält ein <img>, das ausgeschnitten wird, einen sternförmigen <clipPath> und ein <select>-Element, um einen clip-path Eigenschaftswert auszuwählen.

<img
  id="clipped"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<svg height="0" width="0">
  <defs>
    <clipPath id="star">
      <path d="M100,0 42,180 196,70 4,70 158,180z" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#star)" selected>star</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="rect(20px 150px 200px 20px round 10%)">rect</option>
  <option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>

<pre id="log"></pre>

CSS

Die anfängliche Darstellung beinhaltet den Stern als clip-path Quelle.

#clipped {
  margin-bottom: 20px;
  clip-path: url(#star);
}

JavaScript

Wenn Sie eine neue Option aus dem <select>-Menü auswählen, aktualisiert ein Ereignishandler den Wert des clip-path, der auf das <img> gesetzt ist.

const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  const path = evt.target.value;
  document.getElementById("clipped").style.clipPath = path;
  log(`clip-path: ${path};`);
});

function log(text) {
  const logElement = document.querySelector("#log");
  logElement.innerText = `${text}`;
  logElement.scrollTop = logElement.scrollHeight;
}

Ergebnis

Wählen Sie verschiedene Optionen, um den clip-path Wert zu ändern.

• clip-rule
• mask
• filter
• background-clip
• Einführung in CSS-Clipping
• CSS-Masking Modul
• SVG clip-path Attribut
• Anwendung von SVG-Effekten auf HTML-Inhalt