Propriété CSS clip-path

La propriété clip-path définit une région de découpe : la partie d'un élément qui reste visible. Tout ce qui se trouve en dehors de cette région est masqué — mais la zone cachée occupe toujours de l'espace dans la mise en page, elle n'est simplement pas peinte. Cela permet de découper des éléments en formes non rectangulaires (cercles, hexagones, flèches, étoiles) sans modifier les images ou le balisage sous-jacents.

Contrairement au recadrage d'une image matricielle dans un éditeur, un clip-path est purement visuel et réversible : l'élément complet est toujours dans le DOM, reste cliquable uniquement à l'intérieur du clip, et peut être animé entre différentes formes.

Cette propriété accepte quatre types de valeurs :

<clip-source> — une url() pointant vers un élément SVG <clipPath>, pour des tracés entièrement personnalisés.
<basic-shape> — une fonction de forme CSS : circle(), ellipse(), inset(), ou polygon().
<geometry-box> — la boîte de référence par rapport à laquelle la forme est mesurée (border-box, padding-box, content-box, ou margin-box).
none — pas de découpe ; l'élément entier est affiché (valeur par défaut).

clip-path remplace la propriété clip dépréciée, limitée aux rectangles. Préférez clip-path dans tout nouveau code : clip ne fonctionnait que sur les éléments positionnés en absolu et ne pouvait pas produire de formes non rectangulaires.

Quand utiliser clip-path

Afficher des avatars ou des miniatures sous forme de cercles ou d'hexagones tout en conservant une image source carrée.
Créer des séparateurs de section angulaires ou diagonaux sans images d'arrière-plan supplémentaires.
Révéler ou masquer du contenu avec une forme animée (les valeurs <basic-shape> sont animables).
Construire des découpes décoratives, des badges et des flèches à partir d'un seul élément.

Pour faire couler du texte autour d'une forme plutôt que de découper l'élément, utilisez shape-outside à la place.

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

Syntaxe

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

Les fonctions basic-shape

Ces quatre fonctions couvrent presque tous les besoins de découpe. Les coordonnées peuvent utiliser n'importe quelle longueur CSS ou pourcentage ; les pourcentages sont relatifs à la boîte de référence.

circle(radius at cx cy) — un cercle. Exemple : circle(50% at 50% 50%) inscrit le plus grand cercle centré sur l'élément.
ellipse(rx ry at cx cy) — une ellipse avec des rayons horizontal et vertical distincts.
inset(top right bottom left round <radius>) — un rectangle en retrait par rapport à chaque bord, avec un mot-clé round optionnel pour les coins arrondis.
polygon(x1 y1, x2 y2, …) — un polygone arbitraire défini par une liste de points de sommet, dans le sens des aiguilles d'une montre. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) produit un losange.

Pour les formes que vous ne pouvez pas exprimer avec ces fonctions, référencez un <clipPath> SVG : clip-path: url(#myClip).

Exemple de la propriété clip-path :

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

<!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("/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>

Essayez vous-même »

Résultat

L'image carrée est découpée en losange — ses coins sont masqués tandis que la boîte de mise en page reste 200×200.

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

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

<!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(/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>

Essayez vous-même »

Animer clip-path

Lorsque les états de début et de fin utilisent la même fonction <basic-shape> avec le même nombre de points, les navigateurs peuvent interpoler entre eux de manière fluide. Cela rend possibles les révélations de formes et les morphoses avec une transition ou une animation :

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

Un polygon() ne peut s'animer que vers un autre polygon() avec le même nombre de sommets, donc gardez le même nombre de points aux deux extrémités.

Compatibilité des navigateurs et conseils

clip-path avec des valeurs <basic-shape> est pris en charge par tous les navigateurs modernes. Les anciennes versions nécessitaient le préfixe -webkit- ; aujourd'hui une déclaration sans préfixe suffit pour les navigateurs à feuille persistante.
La zone masquée est supprimée uniquement visuellement — elle affecte toujours la mise en page et n'est pas cliquable, donc le reste de la page n'est pas affecté.
Un clip peut masquer les contours, les ombres de boîte et les anneaux de focus qui se trouvent en dehors de la forme ; vérifiez que le focus clavier reste visible.

Valeurs

Valeur	Description
`<clip-source>`	L'`<url>` référençant 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 une `<geometry-box>` en utilisant 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	Aucun tracé de découpe n'est 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 dans un élément.Elle contrôle la forme de la région de découpe qui détermine quelle partie d'un élément doit être affichée.Elle ajuste la marge autour d'un élément.