Propriété clip-path CSS

La propriété clip-path permet de spécifier une région de découpe qui définit la partie de l'élément qui doit être affichée. Les parties situées en dehors de cette région sont masquées. Cette propriété accepte quatre types de valeurs :

<clip-source>
<basic-shape>
<geometry-box>
none

La propriété clip, désormais obsolète, sera remplacée par la propriété clip-path.

Valeur initiale	none
S'applique à	Tous les éléments.
Héritée	Non
Animable	Oui, si spécifié pour `<basic-shape>`.
Version	CSS Masking Module Level 1
Syntaxe DOM	object.style.clipPath = "none";

Syntaxe

Syntaxe de la propriété CSS clip-path

css

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

Exemple de la propriété clip-path :

Exemple de la propriété CSS clip-path avec une valeur basic-shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <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("https://fr.w3docs.com/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>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS clip-path Property

Exemple de la propriété clip-path avec toutes les valeurs :

Exemple de la propriété CSS clip-path avec les valeurs globales et basic-shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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(https://fr.w3docs.com/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, and optional round keyword for border-radius */
      }
      .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>
  </head>
  <body>
    <h2>Clip-path property example</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>

Try it Yourself »

Valeurs

Valeur	Description
`<clip-source>`	L'`<url>` faisant référence à un élément SVG `<clipPath>`.
`<basic-shape>`	Une fonction de forme de base telle que `circle()`, `ellipse()`, `inset()` ou `polygon()`. Peut être combinée avec un `<geometry-box>` à l'aide d'une barre oblique (`/`).
`<geometry-box>`	Définit la boîte de référence pour la forme de base (par ex. `border-box`, `padding-box`, `content-box`, `margin-box`).
none	Le chemin de découpe n'est pas créé.

Remarque : initial, inherit et unset sont des valeurs CSS globales et peuvent être utilisées avec n'importe quelle propriété.

Pratique

Que fait la propriété CSS clip-path ?

Elle définit une région de découpe qui peut être appliquée à n'importe quel élément HTML ou SVG pour contrôler sa partie visible.Elle ajoute une couleur d'arrière-plan à un élément.Elle ajuste la taille du texte à l'intérieur d'un élément.Elle contrôle la forme de la région de découpe qui définit quelle partie d'un élément doit être affichée.Elle ajuste la marge autour d'un élément.

Propriété clip-path CSS ​

Syntaxe ​

Exemple de la propriété clip-path : ​

Résultat ​

Exemple de la propriété clip-path avec toutes les valeurs : ​

Valeurs ​