La propriété clip-path pour découper des images ou des boîtes

Dans la page précédente une image avait été rognée (angles arrondis) grâce à border-radius.
Donc on pouvait faire apparaître une image dans un cercle voire une ellipse voire une "patate".

La propriété clip-path permet de faire apparaître l'image dans un triangle, un trapèze, etc.
Il suffit de définir un chemin fermé (une forme) et de l'appliquer à l'image. Toute la partie de l'image extérieure au chemin est masquée.
Comme vous pouvez constater à la lecture du code cette propriété peut s'appliquer aussi à une boîte.

Images découpées grâce à la propriété clip-path

Boîtes découpées avec la propriété clip-path

Le code de la page

Le CSS

	.decoupe_triangle {clip-path : polygon(0 100%, 50% 0, 100% 100%);}
	.decoupe_cercle {clip-path : circle(40% at 50% 50%); }
	.decoupe_ellipse{clip-path : ellipse(50% 40% at 50% 50%) ; }
	.decoupe_trapeze{clip-path : polygon(0 100%, 10% 0, 90% 0, 100% 100%) ; }
	div{ width : 60%; height : 400px ; margin : auto ;}

Pour dessiner une forme fermée il faut utiliser la commande polygon (pour rectangles, triangles, trapèzes, etc.) ou la commande circle ou encore ellipse.

Le code HTML

<img src ="../images/jolie_fille.jpg" width = "40%" class ="decoupe_triangle" /> <img src ="../images/bikini.jpg" width = "40%" class ="decoupe_cercle" /> <img src ="../images/brune_nue.jpg" width = "40%" class ="decoupe_ellipse" /> <img src ="../inkscape/jolie_fille_vectoriser.svg" width = "40%" class ="decoupe_trapeze" /> ... <div class ="decoupe_triangle" style ="background : purple;"></div> <div class ="decoupe_cercle" style ="background : olive;"></div> <div class ="decoupe_ellipse" style ="background : orange;"></div> <div class ="decoupe_trapeze" style ="background : pink;"></div> ...

Pour afficher une image / boîte rognée il suffit d'appliquer une des classes de découpe à l'élément HTML.
Remarquez que la dernière image insérée est une image matricielle ..

Serez vous surpris d'apprendre que la propriété clip-path ne fonctionne pas avec IE et Edge ...
La solution de repli consiste donc à utiliser les découpes au format SVG. Pour en savoir plus sur les découpes avec SVG visitez le tuto "dessiner avec SVG" dans le même site.
Retour menu