Comment dessiner un cercle dans la page HTML?

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

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

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 le border-radius ) qui représentent 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; } 
 

C’est tout à fait possible en HTML 5 . Vos options sont les suivantes: Emballage SVG et .

Pour dessiner un cercle en SVG intégré:

    

Il existe quelques cercles Unicode que vous pouvez utiliser:

 * { font-size: 50px; } 
 ○ ◌ ◍ ◎ ● 

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 les préfixes -moz- et -webkit- !

À 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; } 
     circle with text   
Text in the circle

Vous pouvez utiliser l’atsortingbut border-radius pour lui donner un rayon de bordure équivalent au rayon de bordure de l’élément. Par exemple:

 
 

(La raison d’utiliser les 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 des boîtes de la plupart des navigateurs utilise toujours le carré extérieur.

Il n’y a pas de moyen technique de dessiner un cercle avec HTML (il n’y a pas de balise HTML ), mais un cercle peut être dessiné.

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

 
You can put text in here.....

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.

 .circle{ height: 65px; width: 65px; border-radius: 50%; border:1px solid red; line-height: 65px; text-align: center; } 
 
text

Faites simplement ce qui suit dans les balises script:

    Circle Canvas         
 .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.  h1 { border: dashed 2px blue; width: 200px; height: 200px; border-radius: 100px; text-align: center; line-height: 60px; } 
     


    hello world

      

simple et novice 🙂

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

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

 
40%

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

 @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/