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 der unten aufgelisteten Werte angegeben.

<clip-source>

Ein <url> der auf ein SVG <clipPath> Element verweist.

<basic-shape>

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

inset()

Definiert ein eingefügtes 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 unter Verwendung einer SVG-Füllregel und einer Reihe von Eckpunkten.

path()

Definiert eine Form unter Verwendung einer optionalen SVG-Füllregel und einer SVG-Pfaddarstellung.

rect()

Definiert ein Rechteck mit den angegebenen Abständen von den Rändern der Referenzbox.

shape()

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

xywh()

Definiert ein Rechteck mit den angegebenen Abständen von den oberen und linken Kanten der Referenzbox und den angegebenen Breiten- und Höhenwerten des Rechtecks.

<geometry-box>

Wenn in Kombination mit einer <basic-shape> angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn er alleine angegeben wird, bewirken die Kanten der genannten Box, einschließlich jeglicher Eckformgebung (wie ein border-radius) die Beschnittspfad. Die Geometrie-Box kann einen der folgenden Werte annehmen:

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 Objektumgrenzungsbox als Referenzbox.

stroke-box

Verwendet die Strichbegrenzungsbox als Referenzbox.

view-box

Verwendet den nächsten SVG-Ansichtsbereich als Referenzbox. Wenn ein viewBox Attribut für das Element, das den SVG-Ansichtsbereich erzeugt, angegeben wird, wird die Referenzbox am Ursprung des durch das viewBox Attribut festgelegten Koordinatensystems positioniert, und die Dimension der Referenzbox wird auf die Breiten- und Höhenwerte des viewBox Attributs gesetzt.

none

Es wird kein Beschnittspfad 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 Beschnittspfad für <div> Elemente definiert wird. Jedes hat einen einfarbigen Hintergrund und einen dicken 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 sie standardmäßig auf border-box gesetzt, mit den 0% und 100% Positionen, die sich an der Außenkante des Rahmens befinden. Im zweiten Beispiel haben wir die <geometry-box> auf content-box gesetzt, was bedeutet, dass die Referenzbox für die Grundform die Außenkante des Inhaltsbereichs ist, die sich innerhalb der Padding-Box befindet. Da unser Beispiel kein padding hat, ist dies die Innenkante des Rahmens.

Ausgehend vom vorherigen Beispiel erstellen wir das gleiche Dreieck mit verschiedenen <basic-shape> Werten, um zu zeigen, wie die shape() und path() Funktionen ebenfalls verwendet werden können, um Beschnittspfade zu erstellen, wobei shape() eine flexiblere Lösung darstellt.

Wir verwenden path(), um den Beschnittspfad des ersten Elements zu definieren, und shape() für den zweiten, wobei beide die Standard-border-box als Referenzbox verwenden:

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);
}

Dadurch 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 benutzerdefinierten Eigenschaften ebenfalls) ermöglicht, ist sie robuster.

Wir demonstrieren dies, indem wir die Größe des darunterliegenden Elements erhöhen:

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

Die Sichtbarkeit oder zumindest teilweise Sichtbarkeit der vier Rahmenseiten im Beschnittpfadbeispiel, das durch die shape() Funktion definiert ist, ist darauf zurückzuführen, dass die Prozentwerte es dem Pfad ermöglichen, mit dem Element zu wachsen. In der path() Version wuchs das Element, aber nicht die Form. Dadurch 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, die als clip-path Quelle verwendet werden.

HTML

Wir fügen zwei <div> Elemente und ein <svg> Element hinzu, das zwei <clipPath> Elemente enthält. Ein <clipPath> enthält vier <rect> Elemente, die zusammen Fensterscheiben definieren und einen leeren Kreuzbereich in der Mitte hinterlassen, und das andere enthält zwei sich 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 Abstand dazwischen anzuordnen, wenn Platz vorhanden ist. Wir definieren ein conic-gradient() Hintergrundbild auf beiden <div> Elementen, das ein interessantes visuelles Element zum Zuschneiden bietet, zusammen mit einem 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;
}

Wir setzen dann die id des <clipPath> als <clip-source>. Wir zentrieren den Text im cross Beispiel vertikal mit align-content, da andernfalls der Text abgeschnitten würde, 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 beschnitten, wobei nur die Teile gezeichnet werden, die die <clipPath> Elemente überlappen.

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

HTML

Die HTML enthält ein <img>, das beschnitten wird, ein sternförmiges <clipPath>, und ein <select> Element zur Auswahl eines clip-path Eigenschaftswertes.

<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

Das anfängliche Rendering verwendet 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, das 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
• CSS Masking Modul
• SVG clip-path Attribut
• SVG-Effekte auf HTML-Inhalt anwenden