Dessiner des formes géométriques simples.

Cercles et disques avec border-radius.

Pour faire un cercle ou un disque, définir un div de forme carré avec width et height. Ensuite définir la weight de border-radius comme suit: lui assigner la moitié de la valeur de weight ou height. Mais attention, cette valeur doit tenir compte des éléments border et padding s'il y en a. La deuxième solution plus souple, se fait en assignant une valeur de 50% à border-radius.

Dans l'exemple01, 39px ne correspond pas à la moitié de 75px car il faut rajouter l'épaisseur de la bordure. Si j'avais placé un texte dans le cerle avec un padding, j'aurais aussi eu à en tenir compte. Par contre, ce cercle occupe bien un carré de 75/75 . Dans l'exemple02, le cercle dépasse du carré initial de 75px à cause du padding !

.exemple01 {
 margin-bottom: 15px;
 padding: 0px;
 
 width: 75px;
 height: 75px;
 
 border: 3px solid  #55A0FF; 
 border-radius: 55px;
 
 background-color: transparent;
} 
								
Disque.
.exemple02 {
 margin-bottom: 15px;
 padding: 15px;
 width: 75px;
 height: 75px;
 border: 3px solid  #55A0FF; 
 
 border-radius: 50%;
 
 background-color: #D16DBA;
} 
								

Simuler une ombre portée.

.exemple03 {
 margin-bottom: 15px;
 width: 75px;
 height: 75px;
 
 border: 3px #55A0FF;
 border-style: none solid solid none; 
 border-radius: 50%;
 
 background-color: #D16DBA;
} 
 								

Demi Cercle, quart et huitième de cercle.

Pour faire un demi cercle, déterminer un rectangle où la valeur de height sera égale à 50% de la width. Ensuite, mettre le border-radius des deux angles supérieurs avec la même valeur que la height et les deux autres à 0. Pour retourner le demi cercle verticalement, il suffit de déclarer les deux angles supérieurs à 0 et mettre la valuer aux deux angles inférieurs, dans l'exemple04 cela donnerait: border-radius: 0 0 40px 40px; Attention, à aussi inverser les valeurs de la bordure bleue dans border-style ! Par contre, s'il est possible de réaliser une translation horizontale, une translation vertivale n'est pas possible du fait que le demi cercle est contenu dans un rectangle mis à l'horizontale. Jouer sur les angles des cotés donnerait un rectangle avec un arrondi soit à droite soit à gauche.

.exemple04 {
 margin-bottom: 15px;
 width: 80px;
 height:40px;
 
 border-radius: 40px 40px 0 0;
 
 border: 3px #55A0FF;
 border-style: solid solid none none; 
 
 background-color: #D16DBA;
} 
								

Pour faire un demi cercle en jouant sur les angles des cotés hauts et bas, il me suffit de faire un rectangle positionné sur l'axe vertical et d'attribuer les valeurs de la même manière que ci-dessus. Et de même pour opérer une translation verticale.

.exemple05 {
 margin-bottom: 15px;
 width: 40px;
 height:80px;
 
 border-radius: 0 40px 40px 0;
 
 background-color: #D16DBA;
 border: 3px #55A0FF;
 border-style: solid solid none none;
} 
								

Pour le quart de cercle, déterminer un carré où width = height et ne déclarer qu'une seule valeur à border-radius, où la valeur = width. Comme nous sommes dans un carré, il suffit de modifier uniquement la valeur border-radius pour faire faire au quart de cercle une rotation complète par tranche de 90°.

.exemple06 {
 margin-bottom: 15px;
 width: 80px;
 height:80px;
 
 border-radius: 80px 0 0 0;
 
 background-color: #D16DBA;
 border: 3px #55A0FF;
 border-style: solid none none none;
} 
								

Pour modifier l'axe sur une autre valeur que celle de 90°, utiliser transform: rotate(45deg); Attention ! La rotation se fait sur l'axe central du carré et donc la pointe (l'angle droit) se trouve décalée vers le bas. Donc, pour garder le même espacement entre la démo et le bloc de code, j'ai du modifier le margin-bottom en conséquence.

.exemple07 {
 margin-bottom: 30px;
 
 width: 80px;
 height:80px;
 border-radius: 80px 0 0 0;
 
 transform: rotate(45deg);

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

Pour le huitième de cercle, il faut rajouter: transform: scale(0.5, 1); où 0.5 réduit l'angle de 90° de moitié et la valeur 1 conserve la width.

.exemple08 {
 margin-bottom: 30px;
 width: 80px;
 height:80px;
 border-radius: 80px 0 0 0;
 
 transform: scale(0.5, 1) rotate(45deg);
 
 background-color: #D16DBA;
 border: 3px #55A0FF;
 border-style: solid none none none;
} 						

Ellipses régulières.

Pour faire une ellipse régulière, un ovale, déterminer un rectangle sur l'axe vertical ou bien horizontal et donner aux valeurs de border-radius width/2 et height/2. Par soucis de compatibilité entre Firefox et Chrome, ne pas oublier de mettre un "/" entre les valeurs. Comme il est possible de mettre une ou plusieurs valeurs, celles situées à gauche sont les dimensions horizontales et à droites les dimensions verticales.

.exemple09 {
 margin-bottom: 15px;
 
 width: 80px;
 height:40px;
 
 border-radius: 40px / 20px;

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

Pour faire une section de deux arcs de cercles, définir un carré et mettre comme valeurs à border-radius: width*2 0 / width*2 0; Par contre, comme il s'agit d'un carré, le seul moyen pour effectuer une rotation sera de passer par transform: rotate(45deg);

.exemple11 {
 margin-bottom: 15px;
 width: 80px;
 height:80px;
 
 border-radius: 160px 0 / 160px 0;
 
 transform: rotate(45deg);
 
 background-color: #D16DBA;
 border: 3px #55A0FF;
 border-style: none solid solid none;
}
					

Ellipses irrégulières.

Ici, j'ai défini la valeur des quatres angles par une paire de valeurs qui vont toujours du coin supérieur gauche au coin inférieur gauche, dans le sens des aiguilles du montre. Chaque couple de valeur détermine donc un angle et à gauche se trouvent les valeurs horizontales et à droite les valeurs verticales.

.exemple10 {
 margin-bottom: 15px;
 width: 200px;
 height:100px;
 
 border-radius: 100px 100px 50px 50px/ 50px 50px 20px 20px;

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

Carré.

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

.exemple12 {
 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.

.exemple17 {
 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.

.exemple18 {
 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 !

.exemple13 {
 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.

.exemple14 {
 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.

.exemple15 {
 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.

.exemple16 {
 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 */
 
} 
					

Ne pas oublier le préfixage de border-radius et transform...

.exemple {
 -ms-border-radius: 100px 100px 50px 50px/ 50px 50px 20px 20px;
 
 -webkit-border-radius: 100px 100px 50px 50px/ 50px 50px 20px 20px;
 
 -moz-border-radius: 100px 100px 50px 50px/ 50px 50px 20px 20px;
 
 border-radius: 100px 100px 50px 50px/ 50px 50px 20px 20px;
 
 
 -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