CSS : découpes de boites et d'images : propriété clip-path

Rappels

Dans la page précédente vous avez vu que l'on peut arrondir les angles des boites avec la propriété border-radius.
Vous avez vu aussi que grâce aux différentes syntaxes de cette propriété la boite pouvait ressembler à un cercle, une ellipse ou une "patate".
Je vous ai montré que cette propriété peut aussi s'appliquer aux images.

Maintenant si vous voulez que la boite ou l'image apparaissent sous forme d'un triangle ou d'un trapèze voire une forme plus complexe il faut utiliser une autre technique.

Propriété clip-path

La propriété clip-path permet de faire apparaître l'image ou la boite dans un triangle, un trapèze, etc.
Il suffit de définir un chemin fermé (une forme) et de l'appliquer à l'image ou à la boite. Toute la partie de l'image extérieure au chemin est alors masquée.

Ci-dessous 4 images et 4 boites rognées grâce à clip-path.

Images rognées

Boîtes rognées

boite 1
boite 2
boite 3
boite 4

Le code de la page

Le CSS

img {display : inline-block ; width :40% ; margin : 1% ;}  
div{ display : inline-block ; width : 40%; height : 400px ; margin : 1% ; background : lime;}
h5 {line-height : 400px; text-align :center; }
                                                      
.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%) ; }

Les images et les DIV se positionnent côte à côte.

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

... <h3>Images rognées</h3> <img src ="../images/jolie_fille.jpg" class ="decoupe_triangle" /> <img src ="../images/bikini.jpg" class ="decoupe_cercle" /> <img src ="../images/brune_nue.jpg" class ="decoupe_ellipse" /> <img src ="../inkscape/jolie_fille_vectoriser.svg" class ="decoupe_trapeze" /> <h3>Boîtes rognées</h3> <div class ="decoupe_triangle"><h5>boite 1</h5></div> <div class ="decoupe_cercle"><h5>boite 2</h5></div> <div class ="decoupe_ellipse"><h5>boite 3</h5></div> <div class ="decoupe_trapeze"><h5>boite 4</h5></div> ...

Pour afficher une image ou une boite avec rognage 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 vectorielle (format SVG) ...

Et si le navigateur ne reconnait pas la propriété clip-path ?

C'est possible si l'internaute utilise un vieille version de Edge ou Firefox (Chrome : mise à jour automatique sans qu'on ne le demande).

.decoupe_cercle{border-radius : 50% ;}
	@supports (clip-path) {.decoupe_cercle {border-radius : 0; clip-path : circle(40% at 50% 50%); }}
Dans le cadre de la classe "decoupe_cercle" le rognage sera effectué par défaut par la propriété border-radius. A moins que la nouvelle propriété clip-path soit supportée par le navigateur. Dans ce cas il faut désactiver la propriété "border-radius" (border-radius : 0) et activer "clip-path". Retour menu