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

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

Rappel.

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