Comment utiliser CSS pour entourer un nombre avec un cercle?

Question

Comment utiliser CSS pour entourer un nombre avec un cercle?

Je voudrais entourer un nombre dans un cercle comme dans cette image:

Nombre dans L'Image de cercle

Est-ce possible et comment est-il réalisé?

195

css css-shapes html

demandé sur Stewartside 2011-02-01 13:07:48

16 réponses

score 359 · Answer 1

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 faire ce travail dans IE8 et plus, vous devez télécharger et utiliser CSS3 PIE. Ma démo ci-dessus ne fonctionnera pas dans IE8, mais c'est seulement parce que jsFiddle n'héberge pas PIE.htc.

score 71 · Answer 2

Le problème avec la plupart des autres réponses ici est que vous devez modifier la taille du conteneur externe afin qu'il soit la taille parfaite en fonction de la taille de la police et du nombre de caractères à afficher. Si vous mélangez des nombres à 1 chiffre et des nombres à 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 vous retrouverez avec un ovale ou un petit nombre aligné verticalement en haut d'un grand cercle. Cela devrait fonctionner correctement pour toute quantité de texte et tout la taille du cercle. Il suffit de définir les width et line-height à 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 avez besoin de rendre le contenu plus long ou plus court, tout ce que vous devez faire est d'ajuster la largeur du conteneur pour un meilleur ajustement.

Voir sur JSFiddle.

score 49 · Answer 3

S'il est 20 et inférieur, vous pouvez simplement utiliser les caractères unicode① ②... ⑳

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

score 30 · Answer 4

Pour les tailles de cercle variant 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 s'appuie sur la largeur du contenu plus les margin- pour déterminer le rayon, puis étend la hauteur pour correspondre à l'aide des padding-. les margin- devraient être ajustés 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 de largeur zéro pour vertical alignement. Déplacé le line-height:0px de l'extérieur vers le pseudo de sorte qu'il soit au moins visible lors de la dégradation pour IE8.

score 19 · Answer 5

, Le plus simple est d'utiliser bootstrap et l'insigne de classe

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

score 11 · Answer 6

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

Http://jsfiddle.net/qod1vstv/

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>

score 7 · Answer 7

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 de la bordure 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.

score 4 · Answer 8

Ma solution ici-cela permet facilement différentes tailles et couleurs et se lie à un CMS pour le contrôle éditorial. Pour IE 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;
}

, Il n'est pas trop difficile de voir comment faire cela. La plus grande question Est de savoir s'il est possible de rendre les dimensions de l'échelle du cercle au contenu.

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

score 2 · Answer 9

Vous travaillez comme avec un bloc standard, c'est-à-dire un carré

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

Ceci est caractéristique de CSS 3 et il n'est pas très bien suporrted, vous pouvez compter sur firefox et safari à coup sûr.

<div class="circle"><span>1234</span></div>

score 1 · Answer 10

Faites quelque chose comme ça dans votre css

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

Utilisez la balise de paragraphe pour écrire le texte. Hope qui aide

score 1 · Answer 11

Quelque chose comme ce que j'ai fait ici pourrait fonctionner (pour les nombres 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>

score 1 · Answer 12

Améliorer la première réponse il suffit de se débarrasser du remplissage et ajouter 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;
}

score 1 · Answer 13

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;

}

score 0 · Answer 14

La réponse de thirtydot 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 nombre 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 la plus simple est d'utiliser Bootstrap

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

score 0 · Answer 15

En retard à 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>

Vous ajoutez essentiellement 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 devrez peut-être ajuster les classes de marge et de remplissage si votre contenu comporte plus d'un chiffre.

score 0 · Answer 16

Voici ma façon de le faire, en utilisant la méthode carrée. l'avantage est qu'il fonctionne avec des valeurs différentes, mais vous avez besoin de 2 travées.

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

Las etiquetas más populares

Comment utiliser CSS pour entourer un nombre avec un cercle?

16 réponses