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>


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>

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>


53

Vous pouvez utiliser quelques cercles Unicode:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

Plus de formes ici .

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

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.


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-!


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>

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).


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>


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.


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>

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>

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>

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>


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.


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>

Et là vous allez, vous avez votre cercle.


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>


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;
}

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 :)


0

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

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

      <span>40%</span>

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

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


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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.