clip-path

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

* Some parts of this feature may have varying levels of support.

Die clip-path CSS Eigenschaft erstellt eine Schnittregion, die festlegt, welcher Teil eines Elements angezeigt werden soll. Teile, die sich innerhalb der Region befinden, werden angezeigt, während die außerhalb liegenden verborgen werden.

Probieren Sie es aus

Syntax

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

Werte

<clip-source>

Ein <url> Verweis auf ein SVG <clipPath> Element.

<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:

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 Menge von Ecken.

path()

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

rect()

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

shape()

Definiert eine Form unter Verwendung 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 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 alleine angegeben, führen die Ränder der angegebenen Box, einschließlich jeder Eckformung (wie border-radius), zur Schnittpfad-Erstellung. 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 Objektbegrenzungsbox als Referenzbox.

stroke-box

Verwendet die Strichbegrenzungsbox als Referenzbox.

view-box

Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn ein viewBox Attribut für das Element, das den SVG-Viewport erstellt, angegeben wird, wird die Referenzbox an der Ursprungsposition des durch das viewBox Attribut festgelegten Koordinatensystems positioniert und die Dimension der Größe der Referenzbox auf die Breiten- und Höhenwerte des viewBox Attributs gesetzt.

none

Es wird kein Schnittpfad erstellt.

Hinweis: Ein berechneter Wert, der nicht none ist, führt auf dieselbe Weise wie CSS opacity bei Werten ungleich 1 zur Erstellung eines neuen Stacking-Kontexts.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Prozentwerterefer to reference box when specified, otherwise border-box
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypja, wie angegeben für <basic-shape>, ansonsten nein

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

Vergleich von HTML und SVG

css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container::before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.view-box {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.view-box::after {
  content: "view-box";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}

Vollständiges Beispiel

HTML

html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="rect(10px 10px 180px 220px round 20px)">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>

CSS

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

Ergebnis

Spezifikationen

Specification
CSS Masking Module Level 1
# the-clip-path

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clip-path
<basic-shape>
fill-box
On HTML elements
Is animatable
path()
stroke-box
On SVG elements
view-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch