Propriété CSS clip-path

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>

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>

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.

Support de Navigateurs

55.0
(Partial)
54.0+ 7.0
-webkit- (Partial)
420 (Partial)


Trouvez-vous cela utile?

Articles Associées