CSS clip-path : Creer des Formes Personnalisees

Qu est-ce que clip-path ?

La propriete CSS clip-path decoupe un element selon une forme geometrique. Tout ce qui se trouve en dehors de la forme est masque — invisible et non cliquable. C est comme un emporte-piece numerique que vous appliquez a n importe quel element HTML.

Avant clip-path, creer des formes non rectangulaires necessitait des images PNG avec transparence, des SVG complexes ou des hacks CSS avec des transforms et des pseudo-elements. clip-path remplace tout cela par une seule propriete declarative.

La propriete est supportee par tous les navigateurs modernes. L exception notable est Internet Explorer, qui ne la supporte pas du tout — mais IE n est plus un facteur pour la plupart des projets web actuels.

Fonctions de Forme

circle()

clip-path: circle(50% at 50% 50%); cree un cercle parfait au centre de l element. Le premier parametre est le rayon (en pourcentage ou pixels), et at definit le centre du cercle.

ellipse()

clip-path: ellipse(40% 60% at 50% 50%); cree une ellipse avec des rayons horizontal et vertical differents. Utile pour des formes ovales.

inset()

clip-path: inset(10% 20% 10% 20% round 15px); cree un rectangle avec des marges interieures et optionnellement des coins arrondis. C est l equivalent d un border-radius mais qui decoupe reellement le contenu.

polygon()

clip-path: polygon(50% 0%, 100% 100%, 0% 100%); cree un triangle en definissant trois points. Chaque paire de valeurs est un sommet (x, y) en pourcentage ou en pixels. Vous pouvez ajouter autant de points que necessaire pour creer des formes complexes.

Formes Courantes

• Triangle : polygon(50% 0%, 0% 100%, 100% 100%) — trois points formant un triangle pointe vers le haut.
• Losange : polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) — quatre points formant un losange.
• Hexagone : Six points regulierement espaces. Parfait pour des galeries en nid d abeille.
• Etoile : Dix points alternant entre des rayons internes et externes. Plus complexe mais visuellement frappant.
• Coupe diagonale : polygon(0 0, 100% 0, 100% 80%, 0 100%) — un rectangle avec un bord inferieur en diagonale. Tres populaire pour les sections de hero.

Animations avec clip-path

clip-path est animable avec les transitions CSS, a condition que les deux etats utilisent la meme fonction de forme avec le meme nombre de points.

.card { clip-path: circle(0% at 50% 50%); transition: clip-path 0.6s ease; }
.card.visible { clip-path: circle(100% at 50% 50%); }

Cela cree une animation de revelation circulaire — l element s agrandit depuis un point jusqu a une visibilite complete. La transition fonctionne parce que les deux etats utilisent la meme fonction (circle).

Pour les animations de polygones, gardez le meme nombre de sommets dans les deux etats. Ajoutez des sommets invisibles a la meme position que d autres sommets pour remplir le nombre de points si necessaire.

Cas d Utilisation Concrets

• Images de profil : Decoupez des photos en cercles, hexagones ou formes originales au lieu d utiliser border-radius (qui ne fonctionne que pour les cercles et les rectangles arrondis).
• Sections de hero : Utilisez un polygone en diagonale ou en vague sur le bas de la section pour une transition non lineaire avec la section suivante.
• Effets de survol : Revelez du contenu au survol en animant clip-path de circle(0%) a circle(100%).
• Galeries creatives : Decoupez les images d une galerie en formes hexagonales pour un effet nid d abeille.

Generez vos clip-path Visuellement

Calculer les coordonnees de polygones a la main est fastidieux. Notre Generateur de Clip Path vous permet de dessiner des formes visuellement — deplacez des points, ajustez les courbes, previsualisez le resultat sur votre image — et exportez le CSS instantanement.