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


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>

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>


53

Hay algunos círculos Unicode que puedes usar:

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

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.


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


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>

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


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>


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.


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>

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>

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>


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.


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>

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


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


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

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


0

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

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

      <span>40%</span>

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

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


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/

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.