Chapitre 1
Généralités sur les éléments

Retour Accueil CSS

10 Des éléments bien en forme : triangles

Termes CSS clés employés : transform.
Compatibilité navigateurs : IE10+, Firefox16+, Chrome et Safari avec préfixe, Opera12.1+.

Problématique

Obtenir un élément triangulaire est un peu plus tordu. Il existe deux façons d’y parvenir.

Triangle grâces aux bordures

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;

Formes d'éléments : les triangles

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.

Triangle grâce à un élément conteneur

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;}


Formes d'éléments : les triangles

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);

Retour Accueil CSS

© 1999-2018 Fabrice "Fyndhorn Elder" Lemainque