clip-path

Probieren Sie es aus

clip-path: circle(40%);

clip-path: ellipse(130px 140px at 10% 20%);

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

clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z");

clip-path: rect(5px 145px 160px 5px round 20%);

clip-path: xywh(0 5px 100% 75% round 15% 0);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/balloon-small.jpg"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

section {
  align-items: flex-start;
}

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Syntax

/* 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 ein oder eine Kombination der unten aufgeführten Werte angegeben.

Werte

<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 wird. Wenn keine Geometrie-Box angegeben ist, wird die border-box als Referenzbox verwendet. Eine der folgenden:

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 einem Satz von Scheitelpunkten.

path()

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

rect()

Definiert ein Rechteck mit den angegebenen Abständen von den Kanten 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 sowie der angegebenen Breite und Höhe des Rechtecks.

<geometry-box>

Wenn in Kombination mit einem <basic-shape> angegeben, definiert dieser Wert die Referenzbox für die Grundform. Wenn er alleine angegeben wird, bewirken die Kanten der angegebenen Box, einschließlich etwaiger Eckformen (wie ein border-radius), der Clipping-Pfad. Die Geometrie-Box kann einer der folgenden Werte sein:

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

stroke-box

Verwendet die Strichumrahmungsbox als Referenzbox.

view-box

Verwendet den nächsten SVG-Viewport als Referenzbox. Wenn ein viewBox Attribut für das Element, das den SVG-Viewport erzeugt, angegeben ist, wird die Referenzbox an der Ursprungsstelle 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 festgelegt.

none

Es wird kein Clipping-Pfad erstellt.

Formale Definition

Formale Syntax

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   

Beispiele

Formen und Geometrie-Boxen

In diesem Beispiel werden zwei Dreiecke erstellt, indem ein polygon() als Clip-Pfad auf <div>-Elementen 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 standardmäßig die border-box verwendet, wobei die 0%- und 100%-Positionen an der Außenkante des Randes liegen. Im zweiten Beispiel setzen wir die <geometry-box> auf content-box, 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 Randes.

shape() versus path() Funktionen

In Erweiterung des vorherigen Beispiels erstellen wir das gleiche Dreieck mit verschiedenen <basic-shape> Werten, um zu demonstrieren, wie die shape() und path() Funktionen ebenfalls verwendet werden können, um Clipping-Pfade zu erstellen, wobei shape() eine flexiblere Lösung ist.

Wir verwenden path(), um den Clipping-Pfad des ersten Elements zu definieren, und shape() für das zweite, wobei beide die Standard-border-box als ihre 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);
}

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

Da die shape()-Funktion die Verwendung von <percentage> Werten (und benutzerdefinierten Eigenschaften ebenfalls) erlaubt, ist sie robuster.

Dies zeigen wir, indem wir die Größe des zugrunde liegenden Elements vergrößern:

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

Die Sichtbarkeit, oder zumindest teilweise Sichtbarkeit, der vier Randseiten im Clipping-Pfad-Beispiel, das durch die shape()-Funktion definiert wird, 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.

SVG als Clip-Quelle

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, das zwei <clipPath>-Elemente enthält, ein. 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 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 zu platzieren, falls Platz vorhanden ist. Wir definieren ein conic-gradient() Hintergrundbild auf beiden <div>-Elementen, das eine interessante visuelle Darstellung zum Clipping 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 der Text ansonsten ausgeschnitten würde, was im window Beispiel geschieht.

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

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

Ergebnisse

Die Elemente, einschließlich ihres Randes und Textes, werden abgeschnitten, wobei nur die Teile, die sich mit den <clipPath>-Elementen überlappen, auf der Seite gezeichnet werden.

Die verschiedenen Wertetypen

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

HTML

Das HTML beinhaltet ein <img>, das abgeschnitten wird, ein sternförmiges <clipPath> und ein <select>-Element, aus dem ein Wert der clip-path Eigenschaft gewählt werden kann.

<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 auf dem <img> gesetzten clip-path.

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.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• clip-rule
• mask
• filter
• background-clip
• Einführung in CSS-Clipping
• CSS-Maskierung Modul
• SVG clip-path Attribut
• Anwenden von SVG-Effekten auf HTML-Inhalte