¿Cómo se dibuja un círculo usando HTML5 y CSS3?
¿También es posible poner texto dentro?
Respuestas:
No se puede dibujar un círculo per se. Pero puedes hacer algo idéntico a un círculo.
Tendría que crear un rectángulo con esquinas redondeadas (vía border-radius) que sean la mitad del ancho / alto del círculo que desea hacer.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>border-radius: 50%;funcionó bien, cambie el tamaño como desee. Para el color puede utilizar background-coloro border.
Es bastante posible en HTML 5 . Sus opciones son: SVG y <canvas>etiqueta incrustados .
Para dibujar un círculo en SVG incrustado:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Circule en <canvas>:
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>Hay algunos círculos Unicode que puedes usar:
Más formas aquí .
Puede superponer texto en los círculos si lo desea:
También puede usar una fuente personalizada (como esta ) si desea tener una mayor probabilidad de que se vea igual en diferentes sistemas, ya que no todas las computadoras / navegadores tienen las mismas fuentes instaladas.
border-radius:50% si desea que el círculo se ajuste a las dimensiones que obtenga el contenedor (por ejemplo, si el texto es de longitud variable)
¡No olvide los prefijos -moz-y -webkit-!
A partir de 2015, puede hacerlo y centrar el texto con tan solo 15 líneas de CSS ( Fiddle ):
body {
background-color: #fff;
}
#circle {
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>Sin ningún -webkit-s, esto funciona en IE11, Firefox, Chrome y Opera, y es válido HTML5 (experimental) y CSS3.
Lo mismo en MS Edge (2020).
.circle{
height: 65px;
width: 65px;
border-radius: 50%;
border:1px solid red;
line-height: 65px;
text-align: center;
}<div class="circle"><span>text</span></div>Puede usar el atributo border-radius para darle un border-radius equivalente al border-radius del elemento. Por ejemplo:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(La razón para usar las extensiones -moz y -webkit es para admitir versiones pre-CSS3-final de Gecko y Webkit).
Hay más ejemplos en esta página . En cuanto a la inserción de texto, puede hacerlo, pero debe tener en cuenta el posicionamiento, ya que el modelo de relleno de cuadro de la mayoría de los navegadores todavía usa el cuadrado exterior.
Técnicamente, no existe una forma de dibujar un círculo con HTML (no hay una <circle>etiqueta HTML), pero se puede dibujar un círculo.
La mejor manera de dibujar uno es agregar border-radius: 50% a una etiqueta como div. He aquí un ejemplo:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;convertirá todos los elementos en un círculo, independientemente de su tamaño. Al menos, siempre que el height y width el objetivo sean iguales, de lo contrario se convertirá en un óvalo .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Nota : los prefijos del navegador ya no son necesarios para border-radius
Alternativamente, también puede usar clip-path: circle();para convertir un elemento en un círculo. Incluso si el elemento tiene un mayor widthque height(o al revés), seguirá siendo un círculo y no un óvalo.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Nota : clip-path no es (todavía) compatible con todos los navegadores
Puede colocar texto dentro del círculo, simplemente escribiendo el texto dentro de las etiquetas del objetivo,
así:
<div>text</div>Si desea centrar el texto en el círculo, puede hacer lo siguiente:
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}<div id="target">
<div id="text">text</div>
</div>Simplemente haga lo siguiente en las etiquetas del script:
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>Y ahí lo tienes, tienes tu círculo.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}<h1> <br>hello world</h1>.at-counter-box {
border: 2px solid #1ac6ff;
width: 150px;
height: 150px;
border-radius: 100px;
font-family: 'Oswald Sans', sans-serif;
color:#000;
}
.at-counter-box-content {
position: relative;
}
.at-counter-content span {
font-size: 40px;
font-weight: bold ;
text-align: center;
position: relative;
top: 55px;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>simple y novato :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Si está utilizando sass para escribir su CSS, puede hacer:
@mixin draw_circle($radius){
width: $radius*2;
height: $radius*2;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-circle {
@include draw_circle(25px);
background-color: red;
}Qué salidas:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Pruébelo aquí: https://www.sassmeister.com/