Expérimenter avec la propriété CSS3 clip-path : polygon

Cette propriété CSS3 permet de définir une forme géométrique — en l’occurrence un polygone, et d’y afficher une image, à la façon des masques de fusion dans photoshop.

Pour cette petite expérimentation, notre image sera celle-ci :

Je remercie au passage Qingbao Meng pour cette super photo sur Unsplash.

Notez-bien que ce sera bien cette image qui sera utilisée dans les démonstrations suivantes sans modification préalable. On va juste lui appliquer une découpe en css.

Maintenant que c’est clair, passons à la suite.

Nous allons ajouter ces propriétés CSS sur notre image pour qu’elle soit responsive :

img{
    max-width:100%;
    height:auto;
    display:block;
}

Faisons tomber l’image sur la gauche :

Un petit miracle rendu possible grace à la propriété clip-path appliquée sur l’image de cette façon :

clip-path:polygon(0% 15%,0% 100%,100% 85%,100% 0%);

Faisons l’inverse maintenant :

Cette fois-ci les coordonnées sont :

clip-path:polygon(0% 0%,0% 85%,100% 100%,100% 15%);

Voici maintenant deux autres variantes :

clip-path:polygon(0% 0%,0% 80%,50% 100%,100% 80%,100% 0%,50% 20%);
clip-path:polygon(0% 20%,0% 100%,50% 80%,100% 100%,100% 20%,50% 0%);

Voilà tout !

Clip-path est une propriété relativement nouvelle mais supportée pour des usages basiques par l’ensemble des navigateurs. Je n’ai pas été très loin mais je continuerai à l’expérimenter dans d’autres articles. On peut notamment l’utiliser avec des formes SVG, et ça, eh bien ça m’intéresse. Alors, en attendant, bon confinement !