paginas - estilos css en html
¿Cómo usar CSS para rodear un número con un círculo? (16)
Me gustaría rodear un número en un círculo como en esta imagen:
¿Es esto posible y cómo se logra?
Algo como lo que he hecho here 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>
Aquí está mi manera de hacerlo, usando el método del cuadrado. Lo bueno es que funciona con diferentes valores, pero necesitas 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>
Aquí hay una demostración de JSFiddle y un fragmento de código :
.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>
Para que esto funcione en IE8 y versiones anteriores , debes descargar y usar CSS3 PIE . Mi demostración anterior no funcionará en IE8, pero eso es solo porque jsFiddle no aloja PIE.htc .
EJEMPLO DE 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;
}
El problema con la mayoría de las otras respuestas aquí es que necesita modificar el tamaño del contenedor exterior para que sea el tamaño perfecto en función del tamaño de la fuente y la cantidad 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 proporción entre el tamaño de fuente y el tamaño del círculo no es perfecta, terminará con un óvalo o con 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. Solo establece el width y line-height en el 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 debe hacer es ajustar el ancho del contenedor para un mejor ajuste.
Esta versión no se basa en valores fijos, codificados de forma rígida, sino en tamaños relativos al font-size de font-size del div .
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>
Haz algo como esto en tu css
div { width: 10em; height: 10em; -webkit-border-radius: 5em; -moz-border-radius: 5em; } p { text-align: center; margin-top: 4.5em; }
Usa la etiqueta de párrafo para escribir el texto. Espero que ayude
La forma más fácil es usar la clase bootstrap y badge.
<span class="badge">1</span>
La respuesta de treintadot es correcta pero le falta un pequeño punto. Necesita agregar posición: relativo , si desea tener un valor centrado en el círculo e incluir también un rango diferente de número. 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>
Mejorando la primera respuesta, simplemente elimine el relleno y agregue line-height y 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;
}
Mi solución aquí: esto permite fácilmente diferentes tamaños y colores y vínculos en un CMS para el control editorial. Para IE degradar 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 se ajusten al contenido.
Actualmente no creo que sea posible. ¿Nadie?
Para tamaños de círculo que varían según el contenido, esto debería funcionar:
<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- para determinar el radio, luego extiende la altura para que coincida con los padding- . Los margin- deberían ajustarse en función del tamaño de la fuente.
Actualizar para eliminar 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 pseudo-elementos para forzar la altura. Necesita el espacio de ancho cero para la alineación vertical. Se movió la line-height:0px desde el exterior al pseudo para que sea al menos visible cuando se degrada para IE8.
Puedes usar el radio de 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 soporta esquinas redondeadas.
Si es 20 y menor, puedes usar los caracteres Unicode ① ② ... ⑳
Tarde en la fiesta, pero aquí hay una solución exclusiva que ha funcionado para mí. 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 las clases bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 a su elemento <span> (o lo que sea) y listo.
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.
Trabajas como con un bloque estándar, eso 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 diseñada, puedes contar con Firefox y Safari de seguro.
<div class="circle"><span>1234</span></div>