¿Cómo usar CSS para rodear un número con un círculo?


250

Me gustaría rodear un número en un círculo como en esta imagen:

Número en la imagen del círculo

¿Es esto posible y cómo se logra?

Respuestas:


442

Aquí hay una demostración en JSFiddle y un fragmento:

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

Mi respuesta es un buen punto de partida, algunas de las otras respuestas brindan flexibilidad para diferentes situaciones. Si te interesa IE8, mira la versión anterior de mi respuesta.


La última versión actual de Internet Explorer, 9, en realidad admite radio de borde. ... y div no es una gran opción para esto. :)
reisio

77
pantalla: bloque en línea;
Kirkland

1
@KyleMit: Esa es una buena idea, en teoría. Desafortunadamente, CSS3 PIE tiene una limitación del mismo dominio .
thirtydot

3
Para evitar tener que hacer cálculos matemáticos en el CSS cada vez que cambie el tamaño de fuente (una molestia si está haciendo un diseño receptivo, por ejemplo), puede usar esta adaptación de jsfiddle de thirtydot que solo usa píxeles para describir el tamaño de fuente: jsfiddle. net / dQR9T / 7058
Steven

1
@steven cómo garantizar que el círculo siempre esté alrededor del número , o podemos hacer que el círculo sea más grande si el número es 24928 se desborda en este momento
transformador

108

El problema con la mayoría de las otras respuestas aquí es que necesita ajustar el tamaño del contenedor externo para que sea el tamaño perfecto en función del tamaño de fuente y el número de caracteres que se mostrarán. Si está mezclando números de 1 dígito y números de 4 dígitos, no funcionará. Si la relación entre el tamaño de fuente y el tamaño del círculo no es perfecta, terminará con un óvalo o un pequeño número alineado verticalmente en la parte superior de un círculo grande. Esto debería funcionar bien para cualquier cantidad de texto y cualquier círculo de tamaño. Simplemente configure el widthy line-heightal mismo valor:

.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 necesita hacer que el contenido sea más largo o más corto, todo lo que necesita hacer es ajustar el ancho del contenedor para un mejor ajuste.

Véalo en JSFiddle .


Ese es exactamente el problema que estaba teniendo, mostrando un porcentaje dentro que podría ser '1', '10' o '100'. Esto funciona perfecto, gracias!
Felipe Castro

Tenga en cuenta que esta edición sugerida fue denegada, pero los cambios en realidad centran el texto un poco mejor verticalmente, así que los agregué a la respuesta manualmente.
Mike

Esta es la mejor respuesta. Usaría translateY (-50%) en lugar del margen superior negativo
Tobias

@Tobias Gracias por la gran idea. He actualizado mi respuesta.
Mike

Sería mucho más limpio eliminar el lapso y agregar el text-aligny line-heightal div. Sigue siendo la mejor respuesta probablemente.
dlsso


41

Para los tamaños de círculo que varían según el contenido, esto debería funcionar:

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

Se basa en el ancho del contenido más los margin-'s para determinar el radio, luego extiende la altura para que coincida con los padding-' s. Los margin-'s tendrían que ajustarse en función del tamaño de fuente.

Actualización para eliminar el elemento interno:

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

Utiliza pseudoelementos para forzar la altura. Necesita el espacio de ancho cero para la alineación vertical. Se movió line-height:0pxdesde el exterior al pseudo para que sea al menos visible cuando se degrada para IE8.


55
Para mí, esta fue la mejor solución. Permite números más grandes y es el más escalable. Todas las otras soluciones tienen demasiada codificación de tamaños. Esto tiene lo menos. El tamaño de fuente se puede cambiar una cantidad justa sin romper esto. Si se cambia drásticamente, el margen debe ajustarse, pero es muy indulgente. Sin embargo, tener que usar un elemento anidado es algo negativo.
Necreaux

@Necreaux Actualizó la respuesta con una versión que reemplaza el elemento interno explícito con pseudo-elementos.
ryachza

1
La mejor solución de hecho. Acabo de reemplazar el tamaño margen izquierdo y margen derecho por 0.35em en lugar de 8px (relleno en solución actualizada). Para que pueda cambiar el tamaño de fuente del número y mantener un margen adecuado.
Jibato

25

la forma más fácil es usar bootstrap y la clase de insignia

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

44
¡Esto es genial! Ya estoy usando bootstrap, simplemente no sabía que esta clase existía.
Justin

1
Buena respuesta navid!
SeyedPooya Soofbaf

22

Esta versión no se basa en valores fijos codificados, sino en tamaños relativos a los font-sizede div.

http://jsfiddle.net/qod1vstv/

ingrese la descripción de la imagen aquí

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
Hola, esto es muy bueno, pero si el número es grande, incluso en 100 o 1000 se desplaza fuera del círculo. Además, ¿sería posible usar el tamaño de la fuente para crear un nuevo color de fondo
Transformador

1
Hermosa solución!
jomofrodo

8

Puede usar el radio del borde para esto:

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

Juega con el radio del borde y los valores de relleno hasta que estés satisfecho con el resultado.

Pero esto no funcionará en todos los navegadores. Supongo que IE todavía no admite esquinas redondeadas.


no olvide `-webkit-border-radius: 15px;` también hay una solución para IE htmlremix.com/css/curved-corner-border-radius-cross-browser, pero piense dos veces antes de implementarlo
Hannes

Probablemente +1 sea el método más fácil ... el respaldo para IE también se ve bien (cuadrado). WordPress hace esto si recuerdo
Ross

4

Mi solución aquí: esto permite fácilmente diferentes tamaños y colores y se une a un CMS para el control editorial. Para IE degradando a cuadrados.

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

No es demasiado difícil ver cómo hacer esto. La pregunta más importante es si es posible hacer que las dimensiones del círculo escalen al contenido.

Actualmente no creo que sea posible. ¿Nadie?


3

Tarde a la fiesta, pero aquí hay una solución de arranque que me ha funcionado. Estoy usando 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>

Básicamente agrega bg-dark text-white rounded-circle px-3 py-1 mx-2 h3clases a su elemento <span>(o lo que sea) y ya está.

Tenga en cuenta que es posible que deba ajustar las clases de margen y relleno si su contenido tiene más de un dígito.


2

Trabajas como con un bloque estándar, que es un cuadrado

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

Esta es una característica de CSS 3 y no está muy bien soportada, puede contar con Firefox y Safari con seguridad.

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

2

EJEMPLO HTML

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

CÓDIGO

    .numberCircle { 

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

}

Si bien este código es útil, sería bueno proporcionar alguna explicación
mhatch

2

Tarde a la fiesta, pero aquí está la solución que elegí con 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>

No requiere trabajo extra. Gracias John Noel Bruno


Quien es John Noel Bruno? Si lo obtiene de un blog o tutorial, proporcionar enlaces sería una ventaja
Dush

1

Haz algo como esto en tu CSS

 div {
    ancho: 10em; altura: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  pags {
    alinear texto: centro; margen superior: 4.5em;
  }

Usa la etiqueta de párrafo para escribir el texto. Espero que ayude


1

Algo como lo que he hecho aquí podría funcionar (para los números del 0 al 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

Mejorando la primera respuesta, simplemente elimine el relleno y agregue line-heighty 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

Aquí está mi forma de hacerlo, utilizando el método cuadrado. Lo bueno es que funciona con diferentes valores, pero necesita 2 tramos.

.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 respuesta de thirtydot es correcta pero le falta un pequeño punto. Debe agregar posición: relativa , si desea tener un valor centrado en el círculo e incluir también un rango diferente de números. Por ejemplo 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;
}

pero una solución más fácil es usar Bootstrap

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.