CSS clip-path affecte-t-il les zones de clic et de survol ?

Oui. La zone découpée est complètement retirée de la région interactive de l'élément, donc les clics et les événements de survol ne se déclenchent qu'à l'intérieur de la forme visible. Si vous avez besoin d'effets de survol sur toute la boîte englobante mais uniquement un découpage visuel, des contournements JavaScript ou des ajustements de pointer-events peuvent être nécessaires.

Comment animer une forme CSS clip-path ?

Vous pouvez effectuer une transition entre deux valeurs clip-path avec des transitions ou animations CSS, à condition que les deux utilisent la même fonction de forme et le même nombre de points. Par exemple, la transition entre deux définitions polygon() avec un nombre de points identique fonctionne parfaitement. La transition entre circle() et polygon() ne fonctionne pas — le navigateur n'a aucun moyen de les interpoler.

Pourquoi mon box-shadow disparaît-il avec clip-path ?

Parce que clip-path découpe tout ce qui est en dehors de la limite de la forme, y compris box-shadow qui se rend en dehors des limites de l'élément. La solution est d'utiliser filter: drop-shadow() — il applique l'ombre après le compositing, en suivant la forme visible réelle plutôt que la boîte englobante.

Puis-je utiliser clip-path pour des designs responsives ?

Oui, si vous utilisez des valeurs en pourcentage dans polygon() ou d'autres fonctions. Les valeurs en pourcentage sont relatives aux dimensions propres de l'élément, donc la forme se redimensionne proportionnellement lorsque l'élément change de taille. Les valeurs en pixels fixes dans clip-path ne se redimensionnent pas.

clip-path est-il supporté sur les navigateurs mobiles ?

Les navigateurs mobiles modernes (iOS Safari 13.4+, Chrome pour Android) supportent les fonctions de forme clip-path de base sans préfixes. Le clip-path basé sur SVG a une couverture légèrement plus large pour les appareils plus anciens. La principale lacune concerne les anciennes versions d'iOS Safari qui nécessitaient le préfixe -webkit- pour certaines syntaxes.

CSS clip-path : Créer des formes personnalisées sans la complexité SVG

La première fois que j'ai remarqué un avatar hexagonal

La première fois que je me suis vraiment arrêté pour observer un site web en me demandant comment c'était fait, c'était quand j'ai vu des avatars d'utilisateurs hexagonaux sur un classement de jeu. Pas circulaires — hexagonaux. Six côtés. Ma première pensée était qu'ils devaient avoir utilisé un masque PNG personnalisé ou une astuce canvas. Il s'avérait que c'était six lignes de CSS.

Ce fut mon introduction à clip-path, et cela a réellement changé ma façon de penser les formes dans le design web. Avant, "forme" signifiait border-radius, SVG ou images. Maintenant le navigateur lui-même est votre outil de découpe.

Un peu d'histoire : comment nous en sommes arrivés là

Avant que clip-path soit une propriété CSS, créer des formes non rectangulaires impliquait de passer par des obstacles douloureux. Vous pouviez utiliser des éléments SVG clipPath et les référencer depuis votre CSS, ce qui fonctionnait mais nécessitait de définir des formes dans une syntaxe complètement différente dans une autre partie de votre balisage. Alternativement, vous utilisiez overflow: hidden avec un positionnement astucieux et des hacks de border-radius — ce qui donnait des formes arrondies mais rien de vraiment anguleux ou arbitraire.

La propriété CSS clip-path a standardisé cela. Au lieu de jongler avec SVG, vous écrivez votre définition de forme directement en CSS. Le navigateur s'occupe du masquage. C'est une de ces fonctionnalités qui vous rend rétrospectivement agacé par le temps perdu avec les anciennes approches.

Les fonctions de forme, une par une

`polygon()` — Le cheval de bataille

polygon() est celle que vous utiliserez le plus. Elle prend une liste de paires de coordonnées définissant les sommets d'une forme. Par défaut, les coordonnées sont des pourcentages de la largeur et de la hauteur de l'élément.

Un triangle basique :

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Cela se lit : centre haut, bas gauche, bas droite. Trois points, un triangle.

Un parallélogramme (idéal pour les ruptures de section diagonales) :

.parallelogram {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

Un hexagone — la forme qui a commencé tout mon parcours avec clip-path :

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Six points, six paires de coordonnées. C'est tout.

La syntaxe devient vite verbeuse avec beaucoup de points, c'est exactement pourquoi un générateur visuel est si utile. Calculer manuellement les sommets d'une forme étoilée, par exemple, implique de la trigonométrie que vous ne voulez définitivement pas faire à la main.

Une étoile à cinq branches, pour référence :

.star {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

Dix paires de coordonnées. Définitivement pas quelque chose que vous voulez taper manuellement.

`circle()` — Plus simple, moins flexible

.avatar {
  clip-path: circle(50%);
}

Ceci découpe l'élément en un cercle de rayon 50% — effectivement identique à border-radius: 50% mais sans affecter la mise en page. Vous pouvez également spécifier le point central :

.off-center-circle {
  clip-path: circle(40% at 60% 50%);
}

Avis honnête : border-radius reste généralement le meilleur choix pour les images circulaires simples. clip-path: circle() est plus utile lorsque vous devez faire interagir le cercle avec d'autres effets clip-path, ou lorsque vous souhaitez l'animer.

`ellipse()` — La cousine allongée du cercle

.ellipse-crop {
  clip-path: ellipse(60% 40% at 50% 50%);
}

Les deux premières valeurs sont les rayons horizontal et vertical. Utile pour les recadrages d'images ovales ou pour créer des formes style lens flare.

`inset()` — La sous-estimée

Celle-ci ne reçoit pas assez d'attention. inset() découpe l'élément selon une région rectangulaire définie par des valeurs d'inset depuis chaque bord — comme un padding inversé :

.inset-crop {
  clip-path: inset(10px 20px 10px 20px);
  /* haut droite bas gauche */
}

Vous pouvez également ajouter un border-radius au rectangle inset :

.rounded-inset {
  clip-path: inset(10% round 12px);
}

Là où inset() brille vraiment, c'est pour les découpes de cartes et les effets d'encoche — ces designs où un morceau d'une carte semble être "perforé" à un coin. Difficile avec le CSS standard, trivial avec inset() combiné à un arrière-plan créatif.

Cas d'utilisation réels

Ruptures de section hero diagonales

Le séparateur incliné entre une section hero et le contenu en dessous est omniprésent. Voici comment c'est fait :

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Ceci découpe le bord inférieur du hero en angle, créant une coupe diagonale. Le contenu en dessous s'écoule naturellement dans l'espace.

Avatars utilisateur hexagonaux

Le classique. S'applique directement sur une balise img :

.avatar-hex {
  width: 120px;
  height: 120px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  object-fit: cover;
}

object-fit: cover assure que l'image remplit l'espace avant le découpage. Sans ça, vous obtenez du letterboxing.

Décorations de cartes angulées

Une carte avec un coin inférieur droit découpé — une touche subtile qui paraît soignée :

.notched-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

Les deux pièges qui vous attraperont

Piège 1 : clip-path mange votre box-shadow

Ça piège presque tout le monde la première fois. Vous ajoutez une belle ombre à une carte, appliquez clip-path pour cette coupe diagonale, et l'ombre disparaît. C'est parce que clip-path découpe tout en dehors de la limite de la forme — y compris les ombres qui se rendent en dehors de la boîte de l'élément.

La solution est filter: drop-shadow() :

/* Ceci sera découpé */
.broken {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Ceci fonctionne correctement */
.fixed {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

filter: drop-shadow() s'applique après le compositing, en suivant le contour de la forme visible réelle. Vous pouvez l'associer au générateur CSS Box Shadow pour concevoir votre ombre puis traduire les valeurs.

Piège 2 : Les zones de survol et de clic suivent le clip

C'est logique une fois qu'on y réfléchit, mais ça surprend les gens. La région découpée est visuellement et fonctionnellement disparue. Les événements souris ne se déclenchent pas dans la zone découpée. Si votre design découpe un coin où un utilisateur pourrait raisonnablement essayer de cliquer, ce clic ne sera pas enregistré.

Animer clip-path (et quand ça ne fonctionne pas)

La bonne nouvelle : clip-path est animable. Le navigateur peut interpoler entre deux formes polygonales de manière fluide :

.btn {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s ease;
}

.btn:hover {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

Ceci anime un bouton rectangulaire pour avoir un coin à coupe diagonale au survol. Propre, fluide, sans JavaScript.

La mauvaise nouvelle : vous ne pouvez animer qu'entre la même fonction de forme avec le même nombre de points. Essayer de passer de circle() à polygon() produit un saut brutal — pas d'interpolation. Et passer entre deux polygones avec des nombres de points différents échoue également.

clip-path responsive

clip-path fonctionne-t-il de manière responsive ? Oui, si vous utilisez des valeurs en pourcentage.

/* Ceci s'adapte correctement */
.responsive-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

Les valeurs en pixels fixes dans clip-path ne s'adaptent pas :

/* Ceci aura l'air mauvais sur les petits écrans */
.broken-responsive {
  clip-path: polygon(0 0, 800px 0, 800px 90%, 0 100%);
}

Tenez-vous aux pourcentages pour toute forme qui vit dans un conteneur fluide. Vous pouvez mélanger calc() avec des pourcentages pour des ajustements spécifiques :

.notched {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

Utiliser le générateur

Taper des coordonnées de polygone à la main est un exercice en frustration. Un générateur visuel clip-path change complètement le workflow — vous faites glisser des poignées sur un aperçu, voyez la forme en temps réel, et copiez le CSS quand ça semble bon.

Comment en tirer le maximum :

Commencer par un preset — la plupart des générateurs incluent triangle, hexagone, parallélogramme, étoile et autres formes courantes. Commencer par un preset puis faire glisser des poignées est plus rapide que de construire depuis zéro.
Utiliser l'aperçu sur du vrai contenu — générez sur une image placeholder ou un div coloré ressemblant à votre contenu réel. Les formes ont l'air très différentes sur une couleur unie vs une photo.
Vérifier la sortie sur les largeurs desktop et mobile — une forme avec des angles peu profonds peut sembler élégante sur desktop et à l'étroit sur téléphone.
Ne copier que ce dont vous avez besoin — un générateur vous donne la propriété clip-path complète. Si vous l'utilisez dans un composant qui nécessite aussi filter: drop-shadow(), collez les deux ensemble.

Combiner clip-path avec d'autres outils CSS

clip-path vit rarement en isolation dans les projets réels. Combinaisons courantes :

Dégradés CSS : Découpez un arrière-plan dégradé en polygone pour des sections décoratives géométriques. Le dégradé se rend en premier, puis la forme le découpe.
CSS Flexbox : Flexbox gère la mise en page autour de vos éléments découpés. clip-path n'affecte pas le flux du document — l'élément occupe toujours son rectangle original dans la mise en page.
CSS Box Shadow : Concevez vos valeurs d'ombre ici, puis traduisez en syntaxe filter: drop-shadow() lors de l'application aux éléments découpés.

Support navigateur : le tableau honnête

Les fonctions de forme clip-path de base — polygon(), circle(), ellipse(), inset() — ont un support solide dans les navigateurs modernes. Chrome, Firefox, Safari et Edge les supportent tous sans préfixes.

Où vous rencontrez encore des problèmes :

L'ancien iOS Safari (avant 13.4) nécessitait le préfixe -webkit- pour les formes de base
Les très anciennes versions d'Android WebView peuvent avoir des problèmes avec des chemins de polygones complexes
Le clip-path: url(#myClip) basé sur SVG a une meilleure couverture legacy pour les environnements anciens

Conclusion

clip-path est une de ces propriétés CSS qui semble presque trop puissante une fois qu'on la maîtrise. Sections diagonales, avatars géométriques, cartes encoches — des choses qui nécessitaient autrefois des assets d'image ou des contournements SVG prennent maintenant quelques lignes de CSS.

Les points essentiels à retenir :

polygon() est le plus polyvalent — utilisez des pourcentages pour un comportement responsive
clip-path découpe box-shadow — utilisez filter: drop-shadow() à la place
Les zones de clic et de survol suivent la limite du clip
Animez uniquement entre formes de même fonction et même nombre de points
En cas de doute, utilisez un générateur visuel — la vie est trop courte pour calculer les sommets d'un hexagone à la main