Comment dessiner un cercle dans une page html?

Réponses:

188

Vous ne pouvez pas dessiner un cercle en soi. Mais vous pouvez créer quelque chose d’identique à un cercle.

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

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>
Développer l'extrait

ryanoshea
la source
6
Après réflexion, vous voudrez peut-être coller un & nbsp; à l'intérieur de ce <div> pour vous assurer qu'il est affiché. Sinon, le navigateur pourrait l'ignorer.
ryanoshea
14
Je pense que cette réponse est fausse car elle dit que vous ne pouvez pas dessiner un cercle en HTML5. Canvas est un élément HTML5 et vous POUVEZ dessiner un cercle en HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj
19
utilisez -webkit-border-radius: 100%; -moz-border-radius: 100%; rayon de la bordure: 100%; de cette façon, il vous suffit de personnaliser la largeur et la hauteur pour appliquer vos modifications à l'avenir
Arkady
3
vous devez ajouter une bordure pour la rendre visible.
hakan
4
J'ai trouvé que l'utilisation border-radius: 50%;fonctionnait bien, changez la taille comme vous le souhaitez. Pour la couleur, vous pouvez utiliser background-colorou border.
Grimeh
76

C'est tout à fait possible en HTML 5 . Vos options sont: SVG et <canvas>tag intégrés .

Pour dessiner un cercle en SVG incorporé: 

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>
Développer l'extrait

Cercle dans <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>
Développer l'extrait

jkj
la source
53

Vous pouvez utiliser quelques cercles Unicode:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;
Développer l'extrait

Plus de formes ici .

Vous pouvez superposer du texte sur les cercles si vous souhaitez:

Afficher l'extrait de code

Vous pouvez également utiliser une police personnalisée (comme celle- ci) si vous voulez avoir plus de chances qu'elle ait la même apparence sur différents systèmes, car tous les ordinateurs / navigateurs n'ont pas les mêmes polices installées.

Alex - GlassEditor.com
la source
19

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

N'oubliez pas les préfixes -moz-et -webkit-!

Léa Verou
la source
1
Vous devez vous assurer que la largeur et la hauteur sont égales, sinon cela créera un ovale.
Hp93
10

À partir de 2015, vous pouvez le créer et centrer le texte avec aussi peu que 15 lignes de CSS ( Fiddle ):

body {
  background-color: #fff;
}
#circle {
  position: relative;
  background-color: #09f;
  margin: 20px auto;
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>circle with text</title>

</head>

<body>
  <div id="circle">
    <div id="text">Text in the circle</div>
  </div>
</body>

</html>
Développer l'extrait

Sans aucun -webkit-s, cela fonctionne sur IE11, Firefox, Chrome et Opera, et il est valide HTML5 (expérimental) et CSS3.

Idem sur MS Edge (2020).

MattAllegro
la source
5 

.circle{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border:1px solid red;
    line-height: 65px;
    text-align: center;
}
<div class="circle"><span>text</span></div>
Développer l'extrait

Ensoleillé
la source
4

Vous pouvez utiliser l'attribut border-radius pour lui donner un border-radius équivalent au border-radius 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 prendre en charge les versions pré-CSS3-final de Gecko et Webkit.)

Il y a plus d'exemples sur cette page . En ce qui concerne l'insertion de texte, vous pouvez le faire, mais vous devez être attentif au positionnement, car le modèle de remplissage de boîte de la plupart des navigateurs utilise toujours le carré extérieur.

duveteux
la source
4

Il n'y a pas techniquement un moyen de dessiner un cercle avec HTML (il n'y a pas de <circle>balise HTML), mais un cercle peut être dessiné.

La meilleure façon d'en dessiner un est de l'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>
Lachlanjc
la source
4

border-radius: 50%;transformera tous les éléments en cercle, quelle que soit leur taille. Au moins, tant que les height et width de la cible sont identiques, sinon elle se transformera en ovale .

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}
<div id="target"></div>
Développer l'extrait

Remarque : les préfixes de navigateur ne sont plus nécessaires pour border-radius

Vous pouvez également utiliser clip-path: circle();pour transformer un élément en cercle. Même si l'élément a un plus grand widthque height(ou l'inverse), il deviendra toujours un cercle et non un ovale.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}
<div id="target"></div>
Développer l'extrait

Remarque : le chemin du clip n'est pas (encore) pris en charge par tous les navigateurs

Vous pouvez placer du texte à l'intérieur du cercle, simplement en écrivant le texte à l'intérieur des balises de la cible,
comme ceci:

<div>text</div>

Si vous souhaitez centrer le texte dans le cercle, vous pouvez effectuer les opérations suivantes:

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;

    display: flex;
    align-items: center;
}

#text{
    width: 100%;
    text-align: center;
}
<div id="target">
    <div id="text">text</div>
</div>
Développer l'extrait

Ce mec
la source
1
Merci d'avoir mentionné clip-path!
umbe1987
3

Vous pouvez utiliser la propriété border-radius ou créer un div avec une hauteur et une largeur fixes et un arrière-plan avec un cercle png.

Bardt
la source
2

Procédez simplement comme suit dans les balises de script:

<!Doctype html>
<html>
<head>
	<title>Circle Canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid 
#d3d3d3;">
	<body>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(100, 75, 50, 0, 2 * Math.PI);
			ctx.stroke();
		</script>
    </body>
</body>
</html>
Développer l'extrait

Et là vous allez, vous avez votre cercle.

Dan
la source
Quelle langue est-ce censé être? L'OP a posé des questions sur HTML5 et CSS3.
Claus Wilke
Cela peut être fait en html en utilisant les balises de script que je pense avoir mentionnées dans la première ligne @ClausWilke
Dan
Veuillez fournir un exemple complet qui montre comment vous l'utilisez dans un document HTML. Voir cette réponse pour un exemple de ce à quoi ressemble un exemple complet.
Claus Wilke
Je pense que cela devrait aider ce que vous n'avez pas pu comprendre si vous le souhaitez, je peux ajouter une photo du résultat à quoi ressemble le cercle. . .
Dan
Pas forcément. Je l'ai mis dans un extrait de code. Il s'exécute lorsque vous cliquez sur le bouton.
Claus Wilke
2 

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
    Développer l'extrait

Mukhtar
la source
1 
.at-counter-box {
    border: 2px solid #1ac6ff;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    font-family: 'Oswald Sans', sans-serif;
    color:#000;
}
.at-counter-box-content {
    position: relative;
}
.at-counter-content span {
    font-size: 40px;
    font-weight: bold ;
    text-align: center;
    position: relative;
    top: 55px;
}
shashi kumar
la source
1 
   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

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

simple et novice :)


la source
0 

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

shashi kumar
la source
3
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant la raison et / ou la manière dont il répond à la question améliorerait considérablement sa valeur à long terme. Veuillez modifier votre réponse pour ajouter des explications.
Toby Speight
0

Si vous utilisez sass pour écrire votre CSS, vous pouvez faire:

@mixin draw_circle($radius){
  width: $radius*2;
  height: $radius*2;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-circle {
  @include draw_circle(25px);
  background-color: red;
}

Quelles sorties:

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

Essayez-le ici: https://www.sassmeister.com/

Rimian
la source