CSS-Eigenschaft clip-path

Die Eigenschaft clip-path erlaubt es, einen Clipping-Bereich, der festlegt, welcher Teil des Elements angezeigt werden soll, anzugeben. Die Teile außerhalb des Clipping-Bereichs werden ausgeblendet. Diese Eigenschaft hat vier Werte: clip-source, basic-shape, geometry-box and none.

Anfangswert none
Gilt für Alle Elemente.
Geerbt Nein
Animierbar Ja, falls angegeben für <basic-shape>.
Version CSS1
DOM Syntax object.style.clipPath = "none";

Syntax

clip-path: clip-source | basic-shape | geometry-box | none | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <style>
    body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    }
    .container {
    display: grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px ;
    grid-gap: 20px;
    justify-content: center;
    }
    .container  div {
    background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg")
    ;
    background-position: center;
    background-size: cover;
    color: #000;
    font-size: 18px;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .example {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
  </style>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Clip-path</h2>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Ein weiteres Beispiel mit allen Werten der Eigenschaft clip-pathy.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <style>
    body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    }
    .container {
    display: grid;
    grid-template-columns: 200px 200px 200px ;
    grid-template-rows: 200px 200px 200px ;
    grid-gap: 20px;
    justify-content: center;
    }
    .container > div {
    background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
    background-position: center;
    background-size: cover;
    color: #000;
    font-size: 18px;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .box1 {
    clip-path: none;
    }
    .box2 {
    clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
    /* values are from-top, from-right, from-bottom, from-left */
    }
    .box3 {
    clip-path: circle(50% at 50% 50%);
    }
    .box4 {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    .box5 {
    clip-path: ellipse(90px 50px at 100px 100px);
    }
    .box6 {
    clip-path: inherit;
    }
    .box7 {
    clip-path: initial;
    }
    .box8 {
    clip-path: unset;
    }
  </style>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Clip-path</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
<clip-source> Das Element <url> , das auf ein SVG-Element <clipPath> verweist.
<basic-shape> Die Form, deren Größe und Position durch <geometry-box> definiert wird.
<geometry-box> Definiert die Referenzbox für die Grundform.
none Clipping path is not created.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Ähnliche Quellen

Height, width, padding, margin, position, clip.

Browser-Support

chrome edge firefox safari opera
55.0
(Partial)
54.0+ 7.0
-webkit- (Partial)
420 (Partial)

Übe dein Wissen

Welche Arten von Werten nimmt die clip-path CSS-Eigenschaft an?
Finden Sie das nützlich?