Comment puis-je créer un cercle en utilisant HTML et CSS ?

Dessiner des cercles sur une page HTML

Créer un élément circulaire en utilisant HTML5 et CSS3 n'est pas directement possible. Cependant, une technique peut être utilisée pour créer un élément qui ressemble visuellement à un cercle.

Créer un rectangle arrondi

La clé pour simuler un cercle est de créer un rectangle avec coins arrondis. La propriété border-radius en CSS nous permet de définir la courbure des coins.

Détermination du rayon

Pour obtenir un cercle parfait, la valeur border-radius doit être égal à la moitié de la largeur ou de la hauteur du rectangle. Cela garantit que les coins sont suffisamment incurvés vers l'intérieur pour créer l'impression d'un cercle.

Exemple de code

Considérez l'extrait de code suivant qui crée un élément circulaire :

<div>

#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

Dans cet exemple, nous créons un rectangle d'une largeur et d'une hauteur de 50 pixels. La valeur du rayon de bordure est définie sur 25 pixels, soit la moitié de la largeur/hauteur du rectangle. Cela produit une forme en forme de cercle avec un remplissage rouge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!