Como você desenha um círculo usando HTML5 e CSS3?
Também é possível inserir texto dentro?
Respostas:
Você não pode desenhar um círculo por si só. Mas você pode fazer algo idêntico a um círculo.
Você teria que criar um retângulo com cantos arredondados (via border-radius) que são metade da largura / altura do círculo que deseja fazer.
#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%;funcionou bem, altere o tamanho conforme desejado. Para cores, você pode usar background-colorou border.
É bem possível em HTML 5 . Suas opções são: SVG e <canvas>tag incorporados .
Para desenhar um círculo em SVG incorporado:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Círculo em <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>Existem alguns círculos Unicode que você pode usar:
Mais formas aqui .
Você pode sobrepor texto nos círculos se desejar:
Você também pode usar uma fonte personalizada (como esta ) se quiser ter uma chance maior de ter a mesma aparência em sistemas diferentes, já que nem todos os computadores / navegadores têm as mesmas fontes instaladas.
border-radius:50% se você quiser que o círculo se ajuste a quaisquer dimensões que o contêiner obtenha (por exemplo, se o texto tiver comprimento variável)
Não se esqueça dos prefixos -moz-e -webkit-!
A partir de 2015, você pode fazer e centralizar o texto com pelo menos 15 linhas 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>Sem qualquer programa -webkit-, funciona no IE11, Firefox, Chrome e Opera, e é válido para HTML5 (experimental) e CSS3.
O mesmo no 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>Você pode usar o atributo border-radius para dar a ele um border-radius equivalente ao border-radius do elemento. Por exemplo:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(A razão para usar as extensões -moz e -webkit é para suportar versões pré-CSS3-final do Gecko e Webkit.)
Existem mais exemplos nesta página . Quanto à inserção de texto, você pode fazê-lo, mas deve estar atento ao posicionamento, já que a maioria dos modelos de preenchimento de caixa dos navegadores ainda usa o quadrado externo.
Não há tecnicamente uma maneira de desenhar um círculo com HTML (não há uma <circle>tag HTML), mas um círculo pode ser desenhado.
A melhor maneira de desenhar um é adicionar border-radius: 50%a uma tag como div. Aqui está um exemplo:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;irá transformar todos os elementos em um círculo, independentemente do tamanho. Pelo menos, enquanto o height e width do alvo forem iguais, caso contrário, ele se tornará oval .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Nota : os prefixos do navegador não são mais necessários para border-radius
Como alternativa, você também pode usar clip-path: circle();para transformar um elemento em um círculo. Mesmo se o elemento tiver um maior widthque height(ou o contrário), ele ainda se tornará um círculo e não uma forma oval.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Nota : o caminho do clipe (ainda) não é compatível com todos os navegadores
Você pode colocar o texto dentro do círculo, simplesmente escrevendo o texto dentro das tags do destino,
assim:
<div>text</div>Se você deseja centralizar o texto no círculo, pode fazer o seguinte:
#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>Basta fazer o seguinte nas tags 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>E aí está, você tem seu 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>simples e novato :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Se estiver usando ousadia para escrever seu CSS, você pode fazer:
@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;
}Quais saídas:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Experimente aqui: https://www.sassmeister.com/