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


250

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

Nombre dans l'image du cercle

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

Réponses:


442

Voici une démo sur JSFiddle et un extrait:

.numberCircle {
    border-radius: 50%;
    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>

Ma réponse est un bon point de départ, certaines des autres réponses offrent une flexibilité pour différentes situations. Si vous vous souciez d'IE8, regardez l' ancienne version de ma réponse.


La dernière version actuelle d'Internet Explorer, 9, prend en charge border-radius. ... et div n'est pas un excellent choix pour cela. :)
reisio

7
affichage: bloc en ligne;
Kirkland

1
@KyleMit: C'est une bonne idée, en théorie. Malheureusement, CSS3 PIE a une limitation de même domaine .
thirtydot

3
Pour éviter d'avoir à faire des calculs dans le CSS chaque fois que vous changez la taille de la police (un problème si vous faites du design réactif par exemple), vous pouvez utiliser cette adaptation du jsfiddle de thirtydot qui n'utilise que des pixels pour décrire la taille de la police: jsfiddle. net / dQR9T / 7058
Steven

1
@steven comment s'assurer que le cercle est toujours autour du nombre , ou pouvons-nous agrandir le cercle si le nombre est 24928, il déborde en ce moment
transformateur

108

Le problème avec la plupart des autres réponses ici est que vous devez modifier la taille du conteneur externe afin qu'elle 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 soit avec un ovale soit avec un petit nombre aligné verticalement en haut d'un grand cercle. Cela devrait fonctionner correctement pour n'importe quelle quantité de texte et n'importe quel cercle de taille. Réglez simplement le widthet line-heightsur 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 .


C'est exactement le problème que j'avais, montrant un pourcentage à l'intérieur qui pourrait être «1», «10» ou «100». Cela fonctionne parfaitement, merci!
Felipe Castro

Notez que cette modification suggérée a été refusée, mais les modifications centrent en fait un peu mieux le texte verticalement, je les ai donc ajoutées manuellement à la réponse.
Mike

C'est la meilleure réponse. J'utiliserais translateY (-50%) au lieu de la marge supérieure négative
Tobias

@Tobias Merci pour cette excellente idée. J'ai mis à jour ma réponse.
Mike

Il serait beaucoup plus propre de retirer la travée et d'ajouter le text-alignet line-heightau div. Toujours la meilleure réponse probablement.
dlsso


41

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 le margin-'s pour déterminer le rayon, puis étend la hauteur pour correspondre en utilisant le padding-' s. Les margin-'devraient être ajustés en fonction de la taille de la police.

Mettre à jour pour supprimer l'élément intérieur:

<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 d'espace de largeur nulle pour l'alignement vertical. Déplacé le line-height:0pxde l'extérieur vers le pseudo afin qu'il soit au moins visible lors de la dégradation pour IE8.


5
Pour moi, c'était la meilleure solution. Il permet des nombres plus importants et est le plus évolutif. Toutes les autres solutions ont un codage trop dur des tailles. C'est le moins. La taille de la police peut être changée assez facilement sans casser cela. Si elle est radicalement modifiée, la marge doit être ajustée, mais elle est très indulgente. Le fait d'avoir à utiliser un élément imbriqué est cependant quelque peu négatif.
Necreaux

@Necreaux Mise à jour de la réponse avec une version qui remplace l'élément interne explicite par des pseudo-éléments.
ryachza

1
La meilleure solution en effet. Je viens de remplacer la taille margin-left et margin-right par 0.35em au lieu de 8px (remplissage dans la solution mise à jour). Afin que vous puissiez modifier la taille de la police numérique et conserver une marge adaptée.
Jibato

25

la manière la plus simple est d'utiliser la classe bootstrap et badge

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

4
C'est bien! J'utilise déjà le bootstrap, je ne savais tout simplement pas que cette classe existait.
Justin

1
Belle réponse navid!
SeyedPooya Soofbaf

22

Cette version ne repose pas sur des valeurs fixes codées en dur mais sur des tailles par rapport à celles font-sizedu div.

http://jsfiddle.net/qod1vstv/

entrez la description de l'image ici

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>

1
salut c'est très bien, mais si le nombre est grand, même en 100 ou 1000 il défile hors du cercle. En outre, serait-il possible d'utiliser la taille de la police pour créer une nouvelle couleur d'arrière-plan
Transformateur

1
Belle solution!
jomofrodo

8

Vous pouvez utiliser le border-radius pour cela:

<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 prend toujours pas en charge les coins arrondis.


n'oubliez pas `-webkit-border-radius: 15px;` il y a aussi un correctif pour IE htmlremix.com/css/curved-corner-border-radius-cross-browser mais réfléchissez bien deux fois pour l'implémenter
Hannes

+1 probablement la méthode la plus simple ... le remplacement pour IE semble également correct (carré). wordpress le fait comme ça si je me souviens
Ross

4

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

Ce n'est pas trop difficile de voir comment procéder. 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?


3

Tard dans la soirée, mais voici une solution bootstrap uniquement 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 bg-dark text-white rounded-circle px-3 py-1 mx-2 h3classes à votre<span> élément (ou autre) et vous avez terminé.

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


2

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

C'est une fonctionnalité de CSS 3 et ce n'est pas très bien corrigé, vous pouvez compter sur firefox et safari à coup sûr.

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

2

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;

}

Bien que ce code soit utile, il serait bon de fournir une explication
mhatch

2

Tard dans la soirée mais voici la solution avec laquelle j'ai opté pour 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>

Aucun travail supplémentaire requis. Merci John Noel Bruno


Qui est John Noel Bruno? Si vous l'obtenez sur un blog ou un tutoriel, fournir des liens serait un plus
Dush

1

Faites quelque chose comme ça dans votre CSS

 div {
    largeur: 10em; hauteur: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    alignement du texte: centre; margin-top: 4.5em;
  }

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


1

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

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

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 porté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>


0

La réponse de thirtydot est juste mais il manque un petit point. Vous devez ajouter position: relative , si vous souhaitez 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 la solution la plus simple consiste à utiliser Bootstrap

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

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.