Accueil

Tutoriel CSS - sommaire

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

CSS : découpes d'images voire de boites avec propriété clip-path & shape-outside

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 : la propriété clip-path.

Propriété clip-path

La propriété clip-path permet de faire apparaître l'image ou la boite sous forme - non pas d'un rectangle - mais d'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 découpées grâce à clip-path.

Images découpées

Boites découpées

Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis

Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis

Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis

Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem oppressi. praediximus enim Montium sub ipso vivendi termino his vocabulis

Le code de la page

Le CSS

img {display : inline-block ; width :40% ; margin : 1% ;}  
.boite{ display : inline-block ; width : 40%; height : 400px ; margin : 1% ; background : lime;}

                                                      
.decoupe_triangle{clip-path : polygon(0 100%, 50% 0, 100% 100%);}
.decoupe_cercle{clip-path : circle(40% at center center); }
.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 ou 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 découpées</h3> <img src ="../images/bikini8.jpg" class ="decoupe_triangle" /> <img src ="../images/bikini6.jpg" class ="decoupe_cercle" /> <img src ="../images/brune_nue.jpg" class ="decoupe_ellipse" /> <img src ="../images/bikini2.jpg" class ="decoupe_trapeze" /> <h3>Boites découpées</h3> <div class =" boite decoupe_triangle"> <p>Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem ... </div> <div class ="boite decoupe_cercle"> <p>Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem ... </div> <div class ="boite decoupe_ellipse"> <p>Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem ... </div> <div class ="boite decoupe_trapeze"> <p>Primi igitur omnium statuuntur Epigonus et Eusebius ob nominum gentilitatem ... </div> ...

Pour afficher une image ou une boite avec découpe, il suffit d'appliquer une des classes de découpe à l'élément HTML.

Remarquez que le contenu (le texte) ne s'adapte pas à la nouvelle forme de la boite, il est tout simplement rogné.
La propriété CSS qui apportera la solution est en préparation.

La propriété clip-path et les anciens navigateurs

Et si le navigateur ne reconnait pas la propriété clip-path ? C'est possible si l'internaute utilise un vieille version de IE.
Il suffit d'introduire un test dans la définition de la classe.

.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 avec 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".

Prolongements

Si une image est découpée, par exemple, en cercle il est préférable que le texte accolé contourne de façon circulaire l'image.
Sachez que c'est possible désormais avec la propriété shape-outside. Propriété shape-outside