Le clip-path, du CSS à la découpe

La propriété clip-path est la solution à beaucoup de problème que rencontre l’intégrateur web devant une maquette « créative », une photo de fond dans une bande inclinée sous un texte, un dégradé derrière une découpe de logo. Grace au clip-path vous pourrez dire a votre web designer  » trop facile ».

Bas les masques

Alors qu’il y a encore peu de temps, nous pouvions imaginer, par exemple une photo en forme de cœur, retourner directement sur son logiciel de retouche préféré pour adapter la photo avec un masque de la couleur du fond de votre site. Mais par le plus grand des malheurs vous n’aimez plus la couleur de fond du site et souhaite la changer. Retoucher toutes les images comportant ce type de masque et s’apercevoir que finalement, c’était mieux avec le fond de départ.
Ce problème n’existe plus si vous utilisé le clip-path, il découpe grâce au CSS, votre photo en forme de cœur masquant de lui-même le contour, changer de photo ou changer de couleur de fond (vous pouvez même utiliser les variables CSS pour aller plus vite) a volonté sans passer par la retouche photo.

Le clip-path, comment ça marche ?

La partie que vous voulez masquer, que ce soit un bloc texte, une image ou une couleur de fond, vous pouvez utiliser clip-path. Cela utilise les mêmes propriétés que le SVG, nous pouvons y trouver les valeurs tel que « circle« , « rect« , « polygon« , « path » avec ce dessin vous rogné la partie.
En exemple je découpe en forme de triangle un bloc avec simplement une couleur de fond jaune :

 #triangle{
 height:200px;
   width: 200px;
   background: #f6aa00;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }

Comme on le voit dans cet exemple, cela est vraiment simple de couper un bloc HTML à la forme souhaitée, la forme polygon et très simple d’utilisation il suffit d’ajouter des coordonnées en pourcent, pour positionner en x et y les points souhaité pour dessiner sa forme.
Un outil très bien fait pour réaliser simplement vos clip-path est disponible sur bennettfeely.com/clippy/

Utiliser des formes complexes

Grace au SVG, nous pouvons vraiment pousser le concept plus loin, en créant des formes complexes sur des logiciels de dessin vectoriel comme Illustrator ou les télécharger depuis une banque d’icône tel que flaticon.
Mais pour une utilisation optimale, il faut préparer son SVG, en effet il faut lui ajouter la balise <clipPath> qui englobe l’ensemble des <path> pour noter que nous faisons référence à ce dessin en particulier.
Dans l’exemple qui suit nous ajouter le SVG directement dans le code HTML ce qui peu permettre de l’animer à l’occasion.
Il y a donc une autre modification à effectuer, celle de mettre une taille directement dans le SVG pour le faire disparaitre.
le SVG modifier :

<svg xmlns="http://www.w3.org/2000/svg" height="0" viewBox="0 0 512 512" width="0"> <clipPath id="vague" ><path d="M284.909,66.146h-81.345l-16.426-27.595c-1.607-2.698-4.514-4.351-7.654-4.351h-51.662c-3.14,0-6.048,1.653-7.654,4.351     l-16.426,27.595H77.049v-6.082c0-4.919-3.988-8.907-8.907-8.907H35.185c-4.92,0-8.907,3.988-8.907,8.907v6.082h-3.88     C10.027,66.146,0,76.174,0,88.543v162.166c0,12.37,10.027,22.398,22.397,22.398h262.512c12.37,0,22.398-10.028,22.398-22.398     V88.543C307.308,76.174,297.279,66.146,284.909,66.146z M153.653,233.379c-35.21,0-63.753-28.543-63.753-63.754     c0-35.209,28.543-63.753,63.753-63.753c35.21,0,63.753,28.544,63.753,63.753C217.406,204.836,188.863,233.379,153.653,233.379z      M270.935,112.322h-27.91c-4.919,0-8.907-3.988-8.907-8.908c0-4.92,3.988-8.908,8.907-8.908h27.91c4.921,0,8.908,3.988,8.908,8.908     C279.843,108.334,275.855,112.322,270.935,112.322z"/> <circle cx="153.653" cy="169.625" r="44.538"/></clipPath></svg>

Le CSS :

img{
   max-width:450px;
   height:auto;
   clip-path: url(#vague);
 }

Aller plus loin avec le clip-path

Pour aller plus loin il vous faut connaitre les applications du SVG, elles sont nombreuses, vous pouvez faire du texte, animer le tout très facilement vous trouverez des informations sur l’article Animer son site web grâce aux animations en SVG .