Termes CSS clés employés : transform.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari avec préfixe, Opera12.1+.
Obtenir un élément triangulaire est un peu plus tordu. Il existe deux façons d’y parvenir.
Cela est possible que grâce au comportement des bordures. Lorsque vous définissez des bordures
épaisses, vous voyez qu’elles se rejoignent dans les coins selon une diagonale. De ce fait, en
définissant des bordures très épaisses et en jouant sur leurs couleurs et leurs opacités, avec un
élément de largeur nulle, nous pouvons obtenir des éléments triangulaires. Cela fonctionne avec tous
les navigateurs.
{width: 0px;
border-left:0px;
border-right:1.44rem solid green;
border-bottom:.72rem solid transparent;
border-top:.72rem solid transparent;}
Augmentez la largeur de la bordure latérale (ici droite) pour allonger la flèche :
{width: 0;
border-left:0;
border-right:12rem solid green;
border-bottom:.72rem solid transparent;
border-top:.72rem solid transparent;
Triangles (grâce aux bordures) | Comportement des bordures width: 2rem; height: 2rem; border:30px solid black; border-left-color: green; border-right-color: green; |
Flèche à gauche width: 0px; border-left:0px; border-right:2rem solid green; border-bottom:1rem solid transparent; border-top:1rem solid transparent; |
Flèche à droite width: 0px; border-right:0px; border-left:2rem solid green; border-bottom:1rem solid transparent; border-top:1rem solid transparent; |
Flèche très allongée width: 0; border-left:0; border-right:12rem solid green; border-bottom:1rem solid transparent; border-top:.72rem solid transparent; |
---|
En réalité toutefois, ce ne sont pas des éléments (présentés en jaune dans tous ces exemples), mais les bordures de ceux-ci : pour y placer un éventuel contenu, vous êtes obligé de recourir à un élément enfant ou frère superposé, comme exposé auparavant.
L’autre possibilité consiste à employer un élément conteneur dont la propriété overflow
est fixée à
hidden
. Pour obtenir le triangle, une rotation est appliquée à l’élément enfant (ici initialement un
carré de 2rem de côté). Comme nous avons fait pivoter le carré de 45°, sa hauteur et sa largeur
deviennent la diagonale du carré, soit 2/cos(45) = 2.8rem. Les dimensions du conteneur doivent être
ajustées en conséquence (ce n’est pas obligatoire, vous pourriez vous contenter de la partie supérieure
du triangle), de même que les marges de l’enfant afin de le centrer correctement : ici de la moitié de
la différence de taille.
DIV.conteneur {width: 2.8rem; height: 1.4rem;overflow:hidden;}
DIV.carre {margin:.4rem;width:2rem; height:2rem;transform:rotate(45deg);}
En modifiant la « vue » obtenue grâce au conteneur, vous pouvez obtenir un triangle orienté de n’importe
quel côté, comme ici pour obtenir un triangle pointant vers la gauche :
DIV.conteneur {width: 2.4rem; height: 2.8rem;overflow:hidden;}
Pour obtenir un triangle pointant à droite, il suffit de modifier la marge gauche de l’élément enfant :
DIV.carre {
…
margin-left:-1rem;
}
Vous pouvez enfin modifier la dimension de la flèche en appliquant une modification d’échelle à l’élément enfant.
DIV.carré {
…
transform:scale(7,.7) rotate(45deg);
}
Cela entraîne toutefois une modification des dimensions. Puisque nous appliquons ici un facteur 7 à la largeur et un facteur 0,7 à la hauteur,
le losange résultant mesure 19.6rem de large pour 1.96rem de haut. Pour ne voir que la partie gauche, il faut modifier la marge gauche de
l’élément enfant : la partie à voir est la moitié de la largeur, soit 8.3rem (en arrondissant) au lieu des 1rem de la dimension
du carré de base. On aura donc un décalage nécessaire de 19.6-8.3= 8.3rem.
DIV.carré {
…
margin-left:7rem ;
}
Et il faut bien sûr adapter la taille du conteneur :
DIV.conteneur {width: 8.3rem; height: 2rem;overflow:hidden;}
Triangles (grâce à un conteneur) | Triangle conteneur : width: a/cos(45); height: a/(2*cos(45)); overflow:hidden; triangle : margin:0; margin-top:a*(1-cos(45)); width = height = a; transform:rotate(45deg); |
Flèche à gauche conteneur : width: a/(2*cos(45)); height: a/cos(45); overflow:hidden; triangle : margin:0; margin-left:a*(1-cos(45)); width = height = a; transform:rotate(45deg); |
Flèche à droite conteneur : width: a/(2*cos(45)); height: a/cos(45); overflow:hidden; triangle :margin:0; margin-left:a*((1-cos(45)-1/(2*cos(45)) width = height = a; transform:rotate(45deg); |
Triangle très allongé Conteneur : width: 8.3rem; height: 2rem; overflow:hidden; Triangle : margin:0; margin-left:8.3rem; width:2rem; height:2rem; transform:scale(7,.7) rotate(45deg); |
---|
|
---|