¿Cómo dibujar un círculo en una página html?

Respuestas:

186

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

ryanoshea
fuente
6
Pensándolo bien, le recomendamos que agregue un & nbsp; dentro de ese <div> para asegurarse de que se muestre. De lo contrario, el navegador podría ignorarlo.
ryanoshea
14
Creo que esta respuesta es incorrecta, ya que dice que no se puede dibujar un círculo en HTML5. Canvas es un elemento HTML5 y PUEDE dibujar un círculo en HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj
19
use -webkit-border-radius: 100%; -moz-border-radius: 100%; radio de borde: 100%; de esta manera, solo necesita personalizar el ancho y la altura para aplicar sus cambios en el futuro
Arkady
3
tienes que agregar un borde para hacerlo visible.
hakan
4
Descubrí que el uso border-radius: 50%;funcionó bien, cambie el tamaño como desee. Para el color puede utilizar background-coloro border.
Grimeh
76

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

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

jkj
fuente
53

Hay algunos círculos Unicode que puedes usar:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;
Expandir fragmento

Más formas aquí .

Puede superponer texto en los círculos si lo desea:

Mostrar fragmento de código

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.

Alex - GlassEditor.com
fuente
19

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

Lea Verou
fuente
1
Debe asegurarse de que tanto el ancho como el alto sean iguales, de lo contrario, se creará un óvalo.
Hp93
9

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

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

MattAllegro
fuente
5 

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

Soleado
fuente
4

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;">&nbsp;</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.

mullido
fuente
4

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>
lachlanjc
fuente
4

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

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

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

Ese tipo
fuente
1
¡Gracias por mencionar clip-path!
umbe1987
3

Puede usar la propiedad border-radius o hacer un div con alto y ancho fijos y un fondo con círculo png.

Bardt
fuente
2

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

Y ahí lo tienes, tienes tu círculo.

Dan
fuente
¿Qué idioma se supone que es este? El OP preguntó sobre HTML5 y CSS3.
Claus Wilke
Esto se puede hacer en html usando las etiquetas de script que creo que mencioné en la primera línea @ClausWilke
Dan
Proporcione un ejemplo completo que muestre cómo usa esto dentro de un documento HTML. Vea esta respuesta para ver un ejemplo de cómo se ve un ejemplo completo.
Claus Wilke
Creo que eso debería ayudar a lo que no pudiste entender. Si quieres, puedo agregar una foto del resultado de cómo se ve el círculo. . .
Dan
No es necesario. Lo puse en un fragmento de código. Se ejecuta al hacer clic en el botón.
Claus Wilke
2 

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
    Expandir fragmento

Mukhtar
fuente
1 
.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;
}
shashi kumar
fuente
1 
   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

    <body>
       <div id="circle"></div>
   </body>

simple y novato :)


fuente
0 

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

shashi kumar
fuente
3
Aunque este código puede responder a la pregunta, proporcionar un contexto adicional sobre por qué y / o cómo responde la pregunta mejoraría significativamente su valor a largo plazo. Por favor, editar su respuesta a añadir un poco de explicación.
Toby Speight
0

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/

Rimiano
fuente