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:
Le cercle est ajouté avec le sélecteur CSS ::before
, mais devrait également fonctionner de la même manière avec ::after
.
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;
}
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 :