web-dev-qa-db-fra.com

Comment dessiner un cercle en page HTML?

Comment dessinez-vous un cercle en utilisant HTML5 et CSS3?

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

htmlcsscss3geometrycss-shapes
102
Sergey Metlov

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

Vous devez créer un rectangle avec des coins arrondis (via border-radius) qui sont ne 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>
167
ryanoshea

C'est tout à fait possible dans HTML 5 . Vos options sont les suivantes: SVG intégré et balise <canvas> .

Pour dessiner un cercle dans SVG intégré:

<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>
73
jkj

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:

#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}
<div id="container">
    <div id="circle">&#x25CF;</div>
    <div id="text">a</div>
</div>

Vous pouvez également utiliser une police personnalisée (telle que this one) si vous souhaitez que ses chances soient identiques sur des systèmes différents, car tous les ordinateurs/navigateurs n’ont pas les mêmes polices installées.

50
Alex

border-radius:50% si vous souhaitez que le cercle s'adapte aux dimensions obtenues par le conteneur (par exemple, si le texte a une longueur variable)

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

18
Lea Verou

À partir de 2015, vous pouvez créer et centrer le texte avec seulement 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, sur Windows7, et est valide HTML5 (expérimental) et CSS3.

7
MattAllegro

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

La meilleure façon d'en dessiner 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>
4
lachlanjc

Vous pouvez utiliser l'attribut border-radius pour lui donner un rayon-rayon é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>

(L'utilisation des extensions -moz et -webkit a pour but de prendre en charge les versions antérieures à CSS3-finale 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 faire attention au positionnement, car le modèle de remplissage de la boîte de la plupart des navigateurs utilise toujours le carré extérieur.

4
fluffy

border-radius: 50%; transformera tous les éléments en cercle, quelle que soit leur taille. Au moins, aussi longtemps que le height et le width de la cible est la même, 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 du navigateur sont et non nécessaires pour la bordure -radius

Vous pouvez également utiliser clip-path: circle(); pour transformer un élément en cercle. Même si l'élément a une width supérieure à height (ou l'inverse), il deviendra toujours un cercle et pas un ovale.

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

En fait, vous pouvez utiliser clip-path to transformer des éléments en toutes sortes de formes

Remarque : clip-path est pas (encore) supporté 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,
ainsi:

<div>text</div>

Si vous souhaitez centrer le texte dans le cercle, vous pouvez procéder comme suit:

#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>
4
Peter Prakker
.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>
3
Sunny

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.

3
Bardt
  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
2
Mukhtar

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 voilà, vous avez votre cercle.

2
Dan
   <head>
       <style>

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

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

simple et novice :)

1
user2768308
.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
shashi kumar

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/

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

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

      <span>40%</span>

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

</div><!--at-counter-box-content-->
0
shashi kumar