Dieclip-path-Eigenschaft (CSS) erstellt eine Clipping-Region, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während diejenigen außerhalb ausgeblendet werden.

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>  <div>    <img                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;

Dieclip-path-Eigenschaft wird als eine oder eine Kombination der unten aufgeführten Werte angegeben.

Werte

<clip-source>

Ein<url>, der auf einSVG<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 dieborder-box als Referenzbox verwendet. Eine der folgenden:

inset()

Definiert ein eingestelltes 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-Ausfüllregel und einem Satz von Eckpunkten.

path()

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

rect()

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

shape()

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

xywh()

Definiert ein Rechteck mit den angegebenen Abständen 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 Basisform. Wenn er alleine angegeben wird, führt dies dazu, dass die Kanten der angegebenen Box, einschließlich jeglicher Eckgestaltung (wie einborder-radius), der Clipping-Pfad sind. Die Geometrie-Box kann einer der folgenden Werte sein:

margin-box

Verwendet dieMargin-Box als Referenzbox.

border-box

Verwendet dieBorder-Box als Referenzbox.

padding-box

Verwendet diePadding-Box als Referenzbox.

content-box

Verwendet dieContent-Box als Referenzbox.

fill-box

Verwendet die Begrenzungsbox des Objekts als Referenzbox.

stroke-box

Verwendet die Begrenzungsbox des Strokes als Referenzbox.

view-box

Verwendet das nächstgelegene SVG-Viewport als Referenzbox. Wenn einviewBox-Attribut für das Element angegeben ist, das den SVG-Viewport erstellt, wird die Referenzbox an die Ursprungskoordinaten verschoben, die durch dasviewBox-Attribut festgelegt werden, und die Dimension der Größe der Referenzbox wird auf die Breite und Höhe desviewBox-Attributs eingestellt.

none

Es wird kein Clipping-Pfad erstellt.

Formale Definition

Formale Syntax

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

<clip-source> =
<url>

<basic-shape> =
<basic-shape-rect>|
<circle()>|
<ellipse()>|
<polygon()>|
<path()>|
<shape()>

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

<basic-shape-rect> =
<inset()>|
<rect()>|
<xywh()>

<circle()> =
circle(<radial-size>?[at<position>]?)

<ellipse()> =
ellipse(<radial-size>?[at<position>]?)

<polygon()> =
polygon(<'fill-rule'>?[round<length>]? ,[<length-percentage><length-percentage>]#)

<path()> =
path(<'fill-rule'>? ,<string>)

<shape()> =
shape(<'fill-rule'>?from<position> ,<shape-command>#)

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

<inset()> =
inset(<length-percentage>{1,4}[round<'border-radius'>]?)

<rect()> =
rect(<top> ,<right> ,<bottom> ,<left>)

<xywh()> =
xywh(<length-percentage>{2}<length-percentage [0,∞]>{2}[round<'border-radius'>]?)

<radial-size> =
<radial-extent>|
<length [0,∞]>|
<length-percentage [0,∞]>{2}

<position> =
<position-one>|
<position-two>|
<position-four>

<fill-rule> =
nonzero|
evenodd

<length-percentage> =
<length>|
<percentage>

<shape-command> =
<move-command>|
<line-command>|
close|
<horizontal-line-command>|
<vertical-line-command>|
<curve-command>|
<smooth-command>|
<arc-command>

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

<border-radius> =
<length-percentage [0,∞]>{1,4}[ /<length-percentage [0,∞]>{1,4}]?

<radial-extent> =
closest-corner|
closest-side|
farthest-corner|
farthest-side

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<move-command> =
move<command-end-point>

<line-command> =
line<command-end-point>

<horizontal-line-command> =
hline[to[<length-percentage>|left|center|right|x-start|x-end]|by<length-percentage>]

<vertical-line-command> =
vline[to[<length-percentage>|top|center|bottom|y-start|y-end]|by<length-percentage>]

<curve-command> =
curve[[to<position>with<control-point>[ /<control-point>]?]|[by<coordinate-pair>with<relative-control-point>[ /<relative-control-point>]?]]

<smooth-command> =
smooth[[to<position>[with<control-point>]?]|[by<coordinate-pair>[with<relative-control-point>]?]]

<arc-command> =
arc<command-end-point>[[of<length-percentage>{1,2}]&&<arc-sweep>?&&<arc-size>?&&[rotate<angle>]?]

<command-end-point> =
to<position>|
by<coordinate-pair>

<control-point> =
<position>|
<relative-control-point>

<coordinate-pair> =
<length-percentage>{2}

<relative-control-point> =
<coordinate-pair>[from[start|end|origin]]?

<arc-sweep> =
cw|
ccw

<arc-size> =
large|
small

Beispiele

Formen und Geometrie-Boxen

In diesem Beispiel werden zwei Dreiecke erstellt, indem einpolygon() als Clip-Pfad auf<div>-Elementen definiert wird. Jedes hat einen einfarbigen Hintergrund und einen dickenborder. Das zweite<div>-Element hat seine Referenzbox aufcontent-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äßigborder-box verwendet, wobei sich die Positionen 0% und 100% am äußeren Rand des Borders befinden. Im zweiten Beispiel haben wir die<geometry-box> aufcontent-box gesetzt, was bedeutet, dass die Referenzbox für die Basisform der äußere Rand des Inhaltsbereichs ist, der sich innerhalb der Padding-Box befindet. Da unser Beispiel keinpadding hat, ist dies der innere Rand des Borders.

shape()- versuspath()-Funktionen

Basierend auf dem vorherigen Beispiel erstellen wir das gleiche Dreieck mit unterschiedlichen<basic-shape>-Werten, um zu demonstrieren, wie dieshape()- undpath()-Funktionen auch verwendet werden können, um Clipping-Pfade zu erstellen, wobeishape() eine flexiblere Lösung darstellt.

Wir verwendenpath(), um den Clipping-Pfad des ersten Elements zu definieren, undshape() für das zweite, beide mit der Standard-Referenzboxborder-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);}

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

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

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

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

Die Sichtbarkeit oder zumindest teilweise Sichtbarkeit der vier Borderseiten im Clipping-Pfad-Beispiel, das durch dieshape()-Funktion definiert ist, liegt daran, dass die Prozentwerte es dem Pfad ermöglichen, mit dem Element zu wachsen. In derpath()-Version des Beispiels wuchs das Element, aber nicht die Form. Dadurch sind die oberen und linken Border teilweise sichtbar, während die rechten und unteren Border ausgeblendet sind.

SVG als Clipping-Quelle

In diesem Beispiel definieren wir SVG<clipPath>-Elemente zur Verwendung alsclip-path-Quelle.

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 Kreuz aus freiem Raum in der Mitte lassen, und das andere enthält zwei sich kreuzende<rect>-Elemente.

<svg height="0" width="0">  <defs>    <clipPath>      <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>      <rect y="0" x="80" width="40" height="200" />      <rect y="80" x="0" width="200" height="40" />    </clipPath>  </defs></svg><div>Window</div><div>Cross</div>

CSS

Wir verwendenFlexbox, um unsere Elemente nebeneinander zu platzieren, wenn Platz vorhanden ist. Wir definieren einconic-gradient() Hintergrundbild auf beiden<div>-Elementen, um einen interessanten visuellen Effekt zum Clipping bereitzustellen, zusammen mit einemborder.

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 dieid des<clipPath> als<clip-source>. Wir zentrieren den Text imcross-Beispiel vertikal mitalign-content, da sonst der Text abgeschnitten würde, wie es imwindow-Beispiel geschieht.

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

Ergebnisse

Die Elemente, einschließlich ihrer Border und Texte, werden abgeschnitten, wobei nur die Teile, die die<clipPath>-Elemente überlappen, auf der Seite dargestellt werden.

Die verschiedenen Werttypen

Dieses Beispiel zeigt die verschiedenen Werte derclip-path-Eigenschaft, die ein HTML-<img>-Element clippen.

HTML

Der HTML-Teil enthält ein<img>, das geclippt wird, ein sternförmiges<clipPath> und ein<select>-Element, um einenclip-path-Eigenschaftswert auszuwählen.

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

CSS

Die Anfangsdarstellung umfasst den Stern alsclip-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 desclip-path, der auf das<img>-Element 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 aus, um denclip-path-Wert zu ändern.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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