clip-path CSS property

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 value */
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 Eigenschaft clip-path wird als einer oder als 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 Wert <geometry-box> definiert wird. Wenn keine Geometry Box angegeben ist, wird border-box als Referenzbox verwendet. Eine der folgenden:

inset()

Definiert ein eingerücktes Rechteck.

circle()

Definiert einen Kreis anhand eines Radius und einer Position.

ellipse()

Definiert eine Ellipse anhand von zwei Radien und einer Position.

polygon()

Definiert ein Polygon anhand einer SVG-Füllregel und einer Menge von Eckpunkten.

path()

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

rect()

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

shape()

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

xywh()

Definiert ein Rechteck anhand der angegebenen Abstände von der oberen und linken Kante der Referenzbox sowie der angegebenen Breite und Höhe des Rechtecks.

<geometry-box>

Wenn dieser Wert in Kombination mit einer <basic-shape> angegeben wird, definiert er die Referenzbox für die Grundform. Wenn er allein angegeben wird, bewirkt er, dass die Kanten der angegebenen Box, einschließlich einer etwaigen Formgebung der Ecken (etwa eines border-radius), den Beschneidungspfad bilden. Die Geometry 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 Objektbegrenzungsbox als Referenzbox.

stroke-box

Verwendet die Begrenzungsbox der Kontur als Referenzbox.

view-box

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

none

Es wird kein Beschneidungspfad 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 Geometry Boxes

In diesem Beispiel werden zwei Dreiecke erstellt, indem ein polygon() als Beschneidungspfad für <div>-Elemente definiert wird. Jedes hat einen einfarbigen Hintergrund und einen dicken border. Für das zweite <div>-Element ist die 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 wurde keine Referenzbox angegeben; daher ist standardmäßig border-box festgelegt, wobei sich die Positionen 0 % und 100 % an der Außenkante des Rahmens befinden. Im zweiten Beispiel setzen wir <geometry-box> auf content-box. Das bedeutet, dass die Referenzbox für die Grundform die Außenkante des Inhaltsbereichs ist, die innerhalb der Padding Box liegt. Da unser Beispiel kein padding hat, entspricht dies der Innenkante des Rahmens.

Funktionen shape() gegenüber path()

Aufbauend auf dem vorherigen Beispiel erstellen wir dasselbe Dreieck mit unterschiedlichen <basic-shape>-Werten. Dies zeigt, wie die Funktionen shape() und path() ebenfalls zur Erstellung von Beschneidungspfaden verwendet werden können, wobei shape() die flexiblere Lösung ist.

Wir verwenden path(), um den Beschneidungspfad des ersten Elements zu definieren, und shape() für das zweite. Beide verwenden die standardmäßige border-box als Referenzbox:

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 Funktion shape() definierte Pfad mit dem Element, während dies bei der path()-Variante nicht der Fall ist:

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

Dies wird demonstriert, indem die Größe des zugrunde liegenden Elements vergrößert wird:

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

Die Sichtbarkeit, oder zumindest teilweise Sichtbarkeit, der vier Rahmenseiten im durch die Funktion shape() definierten Beschneidungspfadbeispiel ist darauf zurückzuführen, dass die Prozentwerte es dem Pfad ermöglichen, mit dem Element zu wachsen. In der path()-Variante wuchs das Element, nicht jedoch die Form. Daher sind die oberen und linken Rahmen teilweise sichtbar, während die rechten und unteren Rahmen abgeschnitten werden.

SVG als Beschneidungsquelle

In diesem Beispiel definieren wir SVG-<clipPath>-Elemente zur Verwendung 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 leeres Kreuz lassen; 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, damit unsere Elemente nebeneinander mit einem Abstand zwischen ihnen angeordnet werden können, sofern ausreichend Platz verfügbar ist. Wir definieren für beide <div>-Elemente ein conic-gradient()-Hintergrundbild, das zusammen mit einem border ein interessantes zu beschneidendes Bild liefert.

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

Anschließend setzen wir die id des <clipPath> als <clip-source>. Wir zentrieren den Text im Beispiel cross mithilfe von align-content vertikal, da der Text andernfalls abgeschnitten würde, wie es im Beispiel window geschieht.

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

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

Ergebnisse

Die Elemente, einschließlich ihres Rahmens und Texts, werden beschnitten; nur die Teile, die die <clipPath>-Elemente überlappen, werden auf der Seite gezeichnet.

Die verschiedenen Werttypen

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

HTML

Das HTML enthält ein <img>, das beschnitten wird, ein sternförmiges <clipPath> und ein <select>-Element zur Auswahl eines Eigenschaftswerts für clip-path.

<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 im Menü <select> eine neue Option auswählen, aktualisiert ein Event-Handler den Wert von clip-path, der für das <img> festgelegt 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 den Wert von clip-path zu ändern.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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