web-dev-qa-db-fra.com

Comment utiliser CSS pour entourer un nombre d'un cercle?

J'aimerais entourer un nombre d'un cercle comme dans cette image: 

Number in Circle Image

Est-ce possible et comment est-il atteint?

htmlcsscss-shapes
200
Pentium10

Voici une démo sur JSFiddle et un extrait:

.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  width: 36px;
  height: 36px;
  padding: 8px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>

Pour que cela fonctionne dans IE8 et les versions antérieures , vous devez télécharger et utiliser CSS3 PIE . Ma démo ci-dessus ne fonctionnera pas dans IE8, mais c'est uniquement parce que jsFiddle n'héberge pas PIE.htc.

371
thirtydot

Le problème avec la plupart des autres réponses ici est que vous devez ajuster la taille du conteneur externe afin qu'il soit de la taille idéale en fonction de la taille de la police et du nombre de caractères à afficher. Si vous mélangez des nombres à 1 chiffre et 4 chiffres, cela ne fonctionnera pas. Si le rapport entre la taille de la police et la taille du cercle n'est pas parfait, vous obtiendrez un ovale ou un petit nombre aligné verticalement au sommet d'un grand cercle. Cela devrait fonctionner correctement pour n’importe quelle quantité de texte et n’importe quel cercle de taille. Il suffit de définir width et line-height avec la même valeur:

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

Si vous devez allonger ou raccourcir le contenu, il vous suffit d’ajuster la largeur du conteneur pour un meilleur ajustement.

Voir sur JSFiddle .

80
Mike

Si la valeur est inférieure ou égale à 20, vous pouvez simplement utiliser les caractères unicode ① ② ...

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

48
Tom N

Pour les tailles de cercle différentes en fonction du contenu, cela devrait fonctionner:

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:2px solid;

  font-size:32px;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:8px;
  margin-right:8px;
}

Il se base sur la largeur du contenu plus les margin- pour déterminer le rayon, puis étend la hauteur à reproduire à l'aide des padding-. Le margin- devra être ajusté en fonction de la taille de la police.

Mise à jour pour supprimer l'élément interne:

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

Utilise des pseudo-éléments pour forcer la hauteur. Besoin de l'espace zéro largeur pour l'alignement vertical. Déplacé le line-height:0px de l'extérieur vers le pseudo afin qu'il soit au moins visible lors de la dégradation pour IE8.

32
ryachza

le moyen le plus simple consiste à utiliser la classe d'amorçage et de badge

 <span class="badge">1</span>
19
Navid

Cette version ne repose pas sur des valeurs fixes codées en dur, mais sur des tailles relatives au font-size de la div.

http://jsfiddle.net/qod1vstv/

 enter image description here

CSS:

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
11
Wolfgang Ziegler

Vous pouvez utiliser le border-radius pour ceci:

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>

Jouez avec le rayon et les valeurs de remplissage jusqu'à ce que vous soyez satisfait du résultat.

Mais cela ne fonctionnera pas dans tous les navigateurs. Je suppose que IE ne supporte toujours pas les coins arrondis.

7
kayahr

Ma solution ici - cela permet facilement différentes tailles et couleurs et les liens dans un CMS pour le contrôle éditorial. Pour IE se dégradant en carrés.

HTML:

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS:

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

Ce n'est pas trop difficile de voir comment faire cela. La grande question est de savoir s'il est possible de transformer les dimensions de l'échelle du cercle en contenu. 

Actuellement, je ne pense pas que ce soit possible. N'importe qui?

4
bearinthewoods

Vous travaillez comme avec un bloc standard, c’est un carré

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

C’est une fonctionnalité de CSS 3 et elle n’est pas très performante, vous pouvez donc compter sur Firefox et Safari. 

<div class="circle"><span>1234</span></div>
2
Damian Leszczyński - Vash

Pour améliorer la première réponse, supprimez simplement le remplissage et ajoutez line-height et vertical-align:

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}
1
Hubyx Reds

Faites quelque chose comme ça dans votre css

 div {
 largeur: 10em; hauteur: 10em; 
 -webkit-border-radius: 5em; -moz-border-radius: 5em; 
 } 
 p {
 text-align: center; haut de la marge: 4.5em; 
 }

Utilisez la balise de paragraphe pour écrire le texte. J'espère que cela pourra aider

1
1000Suns

Exemple HTML

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

CODE

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}
1
Leonardo Vega

Quelque chose comme ce que j'ai fait ici pourrait fonctionner (pour les numéros 0 à 99):

CSS: 

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

HTML: 

<body>
    <div class="circle"><p>30</p></div>
</body>
1
jstol

Voici ma façon de le faire, en utilisant la méthode carrée. L'avantage est que cela fonctionne avec des valeurs différentes, mais vous avez besoin de 2 plages.

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>

1
Chris Li

En retard pour la fête, mais voici une solution bootstrap-only qui a fonctionné pour moi. J'utilise Bootstrap 4:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

En gros, vous ajoutez des classes bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 à votre élément <span> (ou autre) et vous avez terminé.

Notez que vous aurez peut-être besoin d'ajuster les classes de marge et de remplissage si votre contenu comporte plusieurs chiffres.

0
dotNET

En retard à la fête, mais voici la solution que je suis allé avec https://codepen.io/jnbruno/pen/vNpppW

Css:

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

html:

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

Obligatoire pas de travail supplémentaire ... Merci John Noel Bruno

0
Dt23

La réponse de trente ans est juste mais manque un petit point. Vous devez ajouter position: relative , si vous voulez avoir une valeur centrée dans le cercle et inclure également une plage de nombres différente. Par exemple 123;

HTML:

<div class="numberCircle">30</div>

CSS:

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

mais une solution plus simple consiste à utiliser Bootstrap 

<span class="badge" style ="float:right">123</span>

0
Marco Maggiotti