Propriété CSS clip-path

❮ Précédent Suivant ❯

La propriété clip-path permet de spécifier une région de coupure qui définit quelles parties de l'élément doivent être affichées. Les parties hors de la région de coupure sont masquées. Cette propriété a quatre valeurs: clip-source, basic-shape, geometry-box et none.

Valeur initiale	none
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Oui, si spécifié pour <basic-shape>.
Version	CSS1
Syntaxe DOM	object.style.clipPath = "none";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </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>Exemple de la propriété clip-path</h2>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Voici un exemple qui contient toutes les valeurs de la propriété clip-path.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </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>Exemple de la propriété 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>

Essayez-vous-même!

Valeurs

Valeur	Description
<clip-source>	Le <url> fait référence à SVG <clipPath>.
<basic-shape>	La forme dont la taille et la position sont définies par <geometry-box>.
<geometry-box>	Définit la boîte de référence pour la forme de base.
none	Chemin de coupure n'est pas créé.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.