Dessinez un cercle dans un carré en CSS avec ::before

Exemple de cercle dans un carré

Cette page explique comment dessiner un cercle dans un carré en CSS. Un exemple célèbre d'application est la sélection de déplacement sur chess.com:

Cercle dans le carré pour montrer les mouvements possibles sur chess.com

Le cercle est ajouté avec le sélecteur CSS ::before, mais devrait également fonctionner de la même manière avec ::after.

Carré

Considérons le code HTML suivant. Le code contient deux divisions avec la classe square. La seconde division a également la classe with-circle qui ajoute un cercle dans le carré.

<div class="square"></div>
<div class="square with-circle"></div>

La classe .square définit les dimensions et les couleurs de la div pour créer le carré :

.square {
  background-color: #6297CB;
  border: 3px solid #468189;
  width: 30vmin;
  height: 30vmin;
  margin: 5px;  
}

Cercle

Lorsque l'élément a également la classe .with-circle, nous ajoutons le cercle à l'intérieur du carré avec le CSS suivant :

.square.with-circle::before{
  content: '';
  display: inline-block;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  border-radius: 100%;
  background-color: #00CC66;
  position: relative;
}

Le sélecteur est .square.with-circle qui sélectionne les éléments ayant les deux classes .square et .with-circle.

Nous ajoutons l'élément ::before pour créer un nouvel élément avant le carré.
L'élément ::before doit avoir un contenu et être aligné avec le carré :

content: '';
display: inline-block;

Nous fixons le cercle à 60 % du carré :

width: 60%;
height: 60%;

L'astuce pour centrer le cercle consiste à déplacer le cercle de 20 % vers la gauche (20 % à gauche + 60 % de largeur du cercle + 20 % à droite = 100 % du carré). Pour définir la position du cercle avec la propriété left, nous devons spécifier que la position du cercle est relative au carré :

position: relative;
left: 20%;
top: 20%;

Enfin, pour transformer l'élément en cercle, nous ajoutons la propriété border-radius suivante :

border-radius: 100%;

Voici le résultat final :

Voir aussi


Dernière mise à jour : 06/12/2023