Ce qui est bien quand on enseigne, c’est que les étudiants arrivent toujours avec de nouvelles idées. L’un d’eux voulait reproduire un effet observé sur Squarespace, où une div semble entaillée :

Sachant que son niveau lui permettait de comprendre les HTML et CSS du site, je me suis lancé avec elle dans la réalisation de cet effet. Ce découpage de la nav n’est pas si facile, ma première idée était de créer une image aux dimensions de l’entaille et de l’intégrer avec ::after, mais ce n’est pas très responsif et pas aisé à gérer.

Clip Path entre en scène

La propriété CSS clip-path permet de cacher des portions d’un élément via le masquage (masking) et le découpage, ou détourage (clipping).

En bref, la façon dont la propriété fonctionne est simple : on fournit une série de valeurs X et Y pour créer un chemin. Ces valeurs, une fois un chemin complet créé, découpent l’image située à l’intérieur.

Nous pouvons créer de nombreuses formes différentes à partir de cercles, d’ellipses, de polygones. La créativité est la seule limite.

Un triangle simple

L’effet ci-dessus est obtenu en utilisant simplement un élément et en lui appliquant un clip-path.

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

Whoa, détaillons tout ça

De la même façon que pour la propriété position, nous devons penser en termes de valeurs X et Y. X:0 et Y:0 sont situés dans le coin supérieur gauche de l’élément. X:100% signifie qu’on a atteint le côté droit et Y:100% le bas.

Ok, cool. Donc le chemin que nous venons de créer utilise les points suivants :

x: 0, y:100%
x: 50%, y: 0
x: 100%, y: 100%

Un chemin simple, qui part du bas à gauche, se déplace horizontalement jusqu’à la moitié de l’espace (50%), puis monte jusqu’en haut (0) pour atteindre le 2e point, puis va tout à fait à droite horizontalement et en bas, pour atteindre le 3e point : 3 points = un triangle !

Tout ce qui ne se trouve pas à l’intérieur de ces limites est simplement découpé et n’apparaît pas. L’élément lui-même garde ses dimensions, bien que le mode de présentation ait changé.

Formes

Dans ce premier exemple, nous avons utilisé un polygone pour créer une forme et définir un chemin en créant des paires x et y, séparées par des virgules. Mais nous pouvons travailler avec différentes formes, qui prennent des valeurs différentes.

Cercles

Pour créer des cercles, nous passons trois valeurs. L’axe des x et des y nous donne les coordonnées du centre du cercle, et le rayon définit sa taille. La syntaxe est la suivante : “dimension du rayon (at) coordonnées du centre” :

//CSS
.clipClass {
  clip-path: circle(50% at 50% 50%);
}

Ellipses

Si vous préférez une forme oblongue, vous pouvez choisir l’ellipse. Pour celle-ci, vous devez fournir quatre valeurs, une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Ici encore, les coordonnées du centre sont précédées du mot-clé “at” :

//CSS
.clipClass {
  clip-path: ellipse(30% 20% at 50% 50%);
}

Inset

Si les angles aigus des polygones ne vous plaisent pas et que vous souhaitez créer des rectangles arrondis, utilisez les valeurs “inset”. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

//CSS
.clipClass {
  clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}

Ce qui se lit comme :

inset(<haut> <droit> <bas> <gauche> round <rayon-haut> <rayon-droit> <rayon-bas> <rayon-gauche>)

Un peu long ? Bonne nouvelle, il y a un raccourci :

//CSS
.clipClass {
  clip-path: inset(25% 0 round 0 25%);
}

Références rapides :

Cercle : circle(rayon at x y)

Ellipse : ellipse(rayon-x rayon-y at x y)

Polygone : polygon(x y, x y, ...)

Inset : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

Créer des formes

Les cercles et les formes utilisant les rayons sont limités à quelques valeurs, par conséquent les polygones sont souvent un meilleur choix pour créer des formes complexes. Comme nous pouvons définir autant de points que nous le voulons, nous pouvons découper notre élément dans des formes très variées.

Bulle de bande dessinée

//CSS
.clipClass {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Étoile

//CSS
.clipClass {
  clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
}

Animation

Maintenant que nous maîtrisons mieux les formes et la façon de les produire, nous pouvons nous amuser à créer des effets.

Nous pouvons par exemple avoir une forme qui s’applique au survol, en utilisant une propriété transition pour créer un effet en douceur. Cependant, nous devons garder à l’esprit qu’il nous faut créer un état initial par défaut, utilisant les mêmes points que ceux qui nous serviront pour notre état modifié.

//CSS
.animateClass {
  clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
  transition: clip-path 0.5s;
}
.animateClass:hover {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

Utilisation en production

Comme toujours, pour connaître les détails à jour de la compatibilité vous pouvez consulter Can I Use.

Retour à notre tâche initiale

Tout ceci parce que nous voulions recréer la navigation Squarespace, vous vous rappelez ? Eh bien maintenant, si nous utilisons le positionnement pour recouvrir un élément par un autre, puis que nous utilisons clip-path pour masquer l’image, nous pouvons simplement montrer l’image de background sans avoir à appliquer de techniques complexes de remplacement d’images.

voir Squarespace clip-path de Drew Minns dans CodePen

Je ne sais pas ce que vous en pensez, mais je trouve que l’avenir est de plus en plus géométrique.