Como desenhar um círculo na página html?

Respostas:

186

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

rianosséia
fonte
6
Pensando bem, você pode querer manter um & nbsp; dentro desse <div> para garantir que ele seja exibido. Caso contrário, o navegador pode ignorá-lo.
ryanoshea
14
Acho que essa resposta está errada, pois diz que você não pode desenhar um círculo em HTML5. Canvas é um elemento HTML5 e você PODE desenhar um círculo em HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj
19
use -webkit-border-radius: 100%; -moz-border-radius: 100%; raio da borda: 100%; desta forma, você só precisa personalizar a largura e a altura para aplicar suas alterações no futuro
Arkady
3
você tem que adicionar uma borda para torná-lo visível.
hakan
4
Achei que o uso border-radius: 50%;funcionou bem, altere o tamanho conforme desejado. Para cores, você pode usar background-colorou border.
Grimeh
76

É 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>
Expandir trecho

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

jkj
fonte
53

Existem alguns círculos Unicode que você pode usar:

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

Mais formas aqui .

Você pode sobrepor texto nos círculos se desejar:

Exibir trecho de código

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.

Alex - GlassEditor.com
fonte
19

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

Lea Verou
fonte
1
Você deve certificar-se de que a largura e a altura são iguais, caso contrário, será criado um oval.
Hp93 de
9

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

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

MattAllegro
fonte
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 trecho

Ensolarado
fonte
4

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

fofo
fonte
4

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>
Lachlanjc
fonte
4

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

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

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

Aquele cara
fonte
1
Obrigado por mencionar o clip-path!
umbe1987
3

Você pode usar a propriedade border-radius ou fazer um div com altura e largura fixas e um fundo com círculo PNG.

Bardt
fonte
2

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

E aí está, você tem seu círculo.

Dan
fonte
Qual idioma é esse suposto ser? O OP perguntou sobre HTML5 e CSS3.
Claus Wilke
Isso pode ser feito em html usando as tags de script que eu acho que mencionei na primeira linha @ClausWilke
Dan
Forneça um exemplo completo que mostre como usar isso dentro de um documento HTML. Veja esta resposta para um exemplo de como é um exemplo completo.
Claus Wilke
Acho que deve ajudar o que você não conseguiu entender, se quiser, posso adicionar uma foto do resultado de como o círculo se parece. . .
Dan
Não é necessário. Eu coloquei em um trecho de código. Ele é executado quando você clica no botão.
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 trecho

Mukhtar
fonte
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
fonte
1 
   <head>
       <style>

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

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

simples e novato :)


fonte
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
fonte
3
Embora este código possa responder à pergunta, fornecer contexto adicional sobre por que e / ou como ele responde à pergunta aumentaria significativamente seu valor a longo prazo. Por favor edite sua resposta para adicionar alguma explicação.
Toby Speight
0

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/

Rimian
fonte