Rogner images et boites

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 qu'elles soient block ou inline.
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 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) ...

Serez vous surpris d'apprendre que la propriété clip-path ne fonctionne pas avec IE et Edge ...
Retour menu