Comment dessiner un cercle dans une page html ?

Question

Comment dessiner un cercle en utilisant HTML5 et CSS3 ?

Est-il également possible de mettre du texte à l'intérieur ?

Answer 1

On ne peut pas dessiner un cercle en soi. Mais on peut faire quelque chose d'identique à un cercle.

Vous devez créer un rectangle avec des coins arrondis (via border-radius ) qui sont la moitié de la largeur/hauteur du cercle que vous voulez faire.

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

<div id="circle"></div>

Answer 2

Il est tout à fait possible dans HTML 5 . Vous avez le choix : SVG intégré y <canvas> étiquette .

Pour dessiner un cercle dans un SVG intégré :

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

Cercle en <canvas> :

var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()

<canvas id="circlecanvas" width="100" height="100"></canvas>

Answer 3

border-radius:50% si vous souhaitez que le cercle s'adapte aux dimensions du conteneur (par exemple, si le texte est de longueur variable).

N'oubliez pas le -moz- y -webkit- préfixes ! ( préfixe n'est plus nécessaire)

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}

<div class='a'></div>
<div class='b'></div>

Answer 4

Techniquement, il n'y a pas de moyen de dessiner un cercle avec HTML (il n'y a pas d'outil d'aide à la décision). <circle> HTML), mais un cercle peut être dessiné.

La meilleure façon d'en dessiner un est d'ajouter border-radius: 50% à une balise telle que div . Voici un exemple :

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>

Answer 5

Vous pouvez utiliser l'attribut border-radius pour lui donner un rayon de bordure équivalent à celui de l'élément. Par exemple :

<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;">&nbsp;</div>

(La raison de l'utilisation des extensions -moz et -webkit est de supporter les versions pré-CSS3-finales de Gecko et Webkit).

Vous trouverez d'autres exemples sur cette page . Pour ce qui est de l'insertion de texte, vous pouvez le faire, mais vous devez faire attention au positionnement, car le modèle de remplissage des boîtes de la plupart des navigateurs utilise toujours le carré extérieur.