hacer - figuras geometricas en html
Cómo dibujar un círculo en la página html? (16)
¿Cómo se dibuja un círculo con HTML5 y CSS3?
¿También es posible poner texto adentro?
h1 { border: dashed 2px blue; width: 200px; height: 200px; border-radius: 100px; text-align: center; line-height: 60px; }<h1> <br>hello world</h1>#
A partir de 2015, puede hacerlo y centrar el texto con un mínimo de 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, en Windows 7, y es válido HTML5 (experimental) y CSS3.
Es bastante posible en HTML 5 . Sus opciones son: SVG incrustado y etiqueta <canvas> .
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>
Círculo 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 podrías usar:
* { font-size: 50px; }
○
◌
◍
◎
●
Más formas here .
Puede superponer texto en los círculos si lo desea:
#container {
position: relative;
}
#circle {
font-size: 50px;
color: #58f;
}
#text {
z-index: 1;
position: absolute;
top: 21px;
left: 11px;
}
<div id="container">
<div id="circle">●</div>
<div id="text">a</div>
</div>
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.
No es técnicamente una forma de dibujar un círculo con HTML (no hay una etiqueta HTML <circle> ), pero se puede dibujar un círculo.
La mejor forma de dibujar uno es agregar border-radius: 50% a una etiqueta como div . Aquí hay un ejemplo:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
No puedes 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 (a través border-radius ) que tengan 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>
Puede usar el atributo border-radius para darle un radio de borde 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 las versiones anteriores a CSS3 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 la mayoría de los modelos de relleno de caja de navegadores aún usan el recuadro exterior.
Puede usar la propiedad border-radius, o hacer un div con altura y ancho fijos y un fondo con un círculo png.
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/
Simplemente haga lo siguiente en las etiquetas de 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í tienes, tienes tu círculo.
border-radius: 50%; convertirá todos los elementos en un círculo, independientemente del tamaño. Al menos, siempre que la height y el width del objetivo sean los mismos, 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, puede usar clip-path: circle(); para convertir un elemento en un círculo también. Incluso si el elemento tiene un width mayor que la 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>
De hecho, puede usar clip-path para convertir elementos en todo tipo de formas
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,
al igual que:
<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>
border-radius:50% si desea que el círculo se ajuste a las dimensiones que tenga el contenedor (por ejemplo, si el texto es de longitud variable)
¡No olvide los prefijos -moz- y -webkit- !
.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>
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->
<head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
simple y novato :)
.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;
}