Termes CSS clés employés : transform.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari avec préfixe, Opera12.1+.
Par définition, CSS repose sur un modèle de boîtes : les éléments sont donc théoriquement
toujours des parallélépipèdes réguliers. Grâce à certaines astuces, il est toutefois possible
d'obtenir en CSS pur une grande variété de formes. Ce tutoriel concerne le premier type, le plus simple : les parallélogrammes.
Les parallélogrammes sont les éléments de base, le standard : des éléments à base horizontale, dont la
hauteur est définie par les propriétés width et height.
{height:50px;width:50px;} /* carré */
{height:50px;width:100px;} /* rectangle */
Un trapèze peut être obtenu en appliquant une transformation skew :
{height:50px;width:50px;
transform:skew(22deg);}/* trapèze */
Un losange équilatéral sera obtenu en appliquant une rotation à un élément carré :
{height:40px;width:40px;
transform:rotate(-45deg);}
Pour obtenir un losange irrégulier, vous appliquez avant la rotation une modification d'échelle horizontale et/ou verticale.
{height:50px;width:50px;
transform: scale(1.5, .8) rotate(-45deg);}
| Carré height = width |
Rectangle height = a; width= b; |
Parallélogramme height = a; width= b; transform:skew(angle); |
Losange I height = a; width= b; transform:rotate(-45deg); |
Losange II height = a; width= b; transform:scale(1.5, .9) rotate(-45deg) ; |
Attention : gardez bien à l'esprit qu'une transformation CSS s'applique aux éléments enfants d'un élément,
ce qui peut aboutir à un résultat curieux pour le contenu. Vous devrez souvent employer pour celui-ci
un élément supplémentaire : soit un enfant ayant subi une transformation inverse (attention à l'ordre
des transformations !), soit un frère superposé au précédent, en ajustant sa taille et sa position de
façon adéquate (sans oublier le z-index).
contenu |
contenu |
contenu |
contenu |
contenu |
| Carré height = width |
Parallélogramme height = a; width= b; transform:skew(angle); |
Losange height = a; width= b; transform:scale(1.5, .9) rotate(-45deg) ; |
Losange idem + enfant : transform:rotate(45deg) scale(.67, 1.25) translate(.2rem, .1rem); |
Losange idem + frère : width:2rem; margin-top:-1.9rem; z-index:999; |
|
|---|