Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
La propriété clip-path empêche une portion d'un élément d'être affichée en définissant une zone de rognage.
Seule la zone spécifique de l'élément à l'intérieur de la région sera affichée, le reste sera masqué.
Attention vous voulez masquer une zone interne de l'image il faut utiliser la propriété mask-image traitée en fin de chapitre.
Ci-dessous 4 images puis 4 boites découpées grâce à "clip-path".
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.
A chaque DIV on applique deux classes : la classe "boite" pour dessiner un rectangle vert de 40% par 400px et une des quatre classes de découpe.
Et si le navigateur ne reconnait pas la propriété clip-path ?
Il suffit d'introduire un style conditionnel sous forme de deux règles de style.
.decoupe_cercle{border-radius : 50% ;} @supports (clip-path) {.decoupe_cercle {border-radius : 0; clip-path : circle(40% at 50% 50%); }}
Il faut d'abord définir une classe (ici "decoupe") avec une propriété connue de tous les navigateurs : border-radius
Puis la deuxième règle introduite par "@support(clip-path)" pose un test ; si le test est VRAI (donc si clip-path est implémentée)
alors on désactive "border-radius" et on active "clip-path".
Une boite ou image découpée ne peut être ombrée quelque soit la méthode (box-shadow : ... OU filter : drop-shadow(...)).
Dès que vous appliquez une découpe à l'élément, l'ombre portée ne s'applique pas
La propriété clip-path combinée avec la fonction polygon() permet de dessiner des losanges, des hexagones, des octogones,
des pentagones, des étoiles, etc.
Il existe aussi la fonction path() argumentée avec un chemin exprimé en absolu ou relatif selon la syntaxe SVG.
Définir les chemins en SVG