Dessiner des formes géométriques simples 2/2.

Carré.

Le code parle de lui-même...

.exemple01 {
 margin-bottom: 15px;
 width: 40px;
 height:40px;
 
 transform: rotate(45deg);
 
 background-color: #D16DBA;
 border: 3px #55A0FF;
 border-style: solid solid none none;
} 
								

Carré à facettes.

Pour réaliser un carré multicolore ou bien à facette, mettre les propriétés width et height à 0 et déterminer la même taille pour les quatre bordure. C'est sur ce même principe que l'on fait les triangles, mais au lieu de déterminer quatre bordures, on en détermine que trois.

.exemple07 {
 margin-top: 20px;
 margin-bottom: 20px;
 
 width: 0; 
 height: 0; 
 
 border-top: 20px solid #0A693F; /* vert foncé */
 border-bottom: 20px solid #36DAF6; /* bleu ciel */
 border-left: 20px solid #D16DBA; /* mauve */
 border-right: 20px solid #000; /* noir */
 
} 
								

Si l'on met une valeur à width et height, cela permet de créer une pyramide tronquée vue de dessus et c'est aussi la même méthode pour faire des triangles tronqués. Un espace de 20px dans ce cas prendra place au centre du carré avec la couleur de fond par défaut du div ou bien de body. Il suffit de rajouter un background-color pour le modifier.

.exemple08 {
 margin-top: 20px;
 margin-bottom: 20px;
 
 width: 20px; 
 height: 20px; 
 
 border-top: 20px solid #0A693F; /* vert foncé */
 border-bottom: 20px solid #36DAF6; /* bleu ciel */
 border-left: 20px solid #D16DBA; /* mauve */
 border-right: 20px solid #000; /* noir */
 
 background-color: #FF1400;
 
} 
								

Losanges.

Ce losange a été réalisé avec un carré sur lequel j'ai appliqué une transformation: skew(15deg). Pour obtenir que l'axe des angles se croisent sur une perpandiculaire, j'ai du adapter le skew en fonction de ma width et de ma height. Appliquer cette transfomation ne garantie pas la conservation de l'axe perpandiculaire et les angles peuvent s'en trouver décalés. Il faut donc trouver une correspondance entre les valeurs width, height et skew. Quant à la rotation, elle aussi se fait au jugé...

Et comme toujours, tenir compte de la rotation pour les margin !

.exemple02 {
 margin-top: 20px;
 margin-bottom: 20px;
 width: 40px;
 height:40px;
 
 transform: rotate(52deg) skew(15deg);

 background-color: #D16DBA;
/*  border: 3px #55A0FF;
 border-style: solid solid none none; */
} 							

Triangles isocèle.

Cette technique ne permet, à ce que j'en ai constaté, que d'obtenir des triangles isocèles. Même en mettant la même valeur aux différents border, je n'obtiens pas de triangle isocèle. Dans l'exemple04, toutes les bordures sont colorées afin de voir comment elles fonctionnent.

.exemple04 {
 margin-top: 20px;
 margin-bottom: 20px;
 
 width: 0;
 height: 0;
 
 border-top: 20px solid #F63641; /* vert foncé */
 border-bottom: 20px solid #36DAF6; /* bleu */
 border-left: 30px solid #D16DBA; /* mauve, le triangle voulu */
 
} 
					

Pour ne conserver que le triangle, modifier les couleur par transparent.

.exemple05 {
 margin-top: 20px;
 margin-bottom: 20px;
 
 width: 0;
 height: 0;
 
 border-top: 20px solid transparent;
 border-bottom: 20px solid transparent; 
 border-left: 30px solid #D16DBA; /* mauve */
 
} 
					

Triangles tronqué.

Même chose que dans l'exemple04 précedent mais avec une valeur de 20px à height et width.

.exemple06 {
 margin-top: 20px;
 margin-bottom: 20px;
 
 width: 20px;
 height: 20px;
 
 border-top: 20px solid #0A693F; /* vert foncé */
 border-bottom: 20px solid #36DAF6; /* bleu ciel */
 border-left: 30px solid #D16DBA; /* mauve */
 
} 
					

Rappel.

Ne pas oublier le préfixage de transform...

.exemple {

 -ms-transform: rotate(45deg);
 
 -webkit-transform: rotate(45deg);
 
 -moz-transform: rotate(45deg);

 transform: rotate(45deg);
 
} 
					

Keep and Try it ! Dernière mise à jour: 19/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11