Maneira mais fácil de criar div de círculo do que usar uma imagem?


183

Gostaria de saber se existe uma maneira mais fácil de criar divs circulares do que o que estou fazendo agora.

Atualmente, estou apenas criando uma imagem para cada tamanho diferente, mas é irritante fazer isso.

Existe alguma maneira usando CSS para fazer divs que são circulares e posso especificar o raio?


1
Em quais navegadores isso deve ser suportado?
thirtydot

Dê uma olhada na minha resposta a esta pergunta relacionada, particularmente as demos: stackoverflow.com/questions/4451350/…
Orbling

1
Você também pode usar SVG (VML) para fazer um círculo.
precisa saber é o seguinte

2
Por que você não pode redimensionar a largura e a altura da imagem em vez de criar tamanhos diferentes? Qual o tamanho dessas imagens?
Mottie

Respostas:


295

Aqui está uma demonstração: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Para fazer isso funcionar no IE8 e versões anteriores , você deve baixar e usar o CSS3 PIE . Minha demonstração acima não funcionará no IE8, mas é apenas porque o jsFiddle não hospeda PIE.htc.

Minha demo fica assim:


Eu não posso fazer div circular no chrome. Porém, funciona no Mozilla .. Meu URL é chokate.maninactionscript.com/chokates clique na imagem do deserto ou na anterior, a div mostrada no zoom da imagem não é circular .. está em mozilla.
#

1
@ techie_28: A divpágina é redonda, e você pode ver se adicionar, por exemplo, border: 5px solid reda ela. O problema é que as partes da imagem que "ultrapassam o círculo" não estão sendo ocultadas. Nenhuma das soluções alternativas usuais é particularmente fácil de aplicar aqui. Sugiro usar a -webkit-mask-imagepropriedade para corrigir navegadores WebKit (e manter border-radius, para outros navegadores). Mais informações aqui: webkit.org/blog/181/css-masks . Você também pode fazer uma pergunta aqui no Stack Overflow, para ver se mais alguém tem outras idéias.
thirtydot

1
Você também pode fazer 100% em vez de 999px.
21413 Tony Wickham

1
.htc não é mais suportado.
Oliver Dixon

Gostaria de saber como alinhar objetos (como botões) dentro de uma div redonda! : D
Zibri

26

Definir o raio da borda de cada lado de um elemento para 50% criará a exibição do círculo em qualquer tamanho:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

1
Este é provavelmente o método que deve ser usado agora (em 2017).
Scribblemacher

13

Tente isto

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

6

É realmente possível.

Consulte: Dica CSS: Como criar círculos sem imagens . Veja a demonstração .

Mas esteja avisado, ele tem sérias desvantagens em termos de compatibilidade, basicamente, você está fazendo um latido de gato.

Veja trabalhando aqui

Como você vai ver você só tem que configurar o heighte widtha metade doborder-radius

Boa sorte!


Olá, obrigado pelo seu jsfiddlelink! Este link é o único que trabalha com sua resposta no momento. ;)
TooroSan

3

Há também [a má idéia] de usar vários (20+) divs horizontais ou verticais de 1px para construir um círculo. Este plugin jQuery usa esse método para construir formas diferentes.


3

Dê largura e altura, dependendo do tamanho, mas mantenha os dois iguais

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>


3
border-radius: 50%;basta.
precisa saber é o seguinte

3

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Só queria mencionar outra solução que responde à pergunta "Maneira mais fácil de criar div de círculo do que usar uma imagem?" que é usar FontAwesome.

Você importa o arquivo css fontawesome ou a partir da CDN aqui

e então você apenas:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

e você pode dar a cor que desejar para qualquer tamanho de fonte.


2

Você pode tentar a radial-gradientfunção CSS:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Aplique-o a uma divcamada:

<div class="circle"></div>

2

Digamos que você tenha esta imagem:

para fazer um círculo com isso, você só precisa adicionar

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

Então, se você tem um div, pode fazer a mesma coisa.

Veja o exemplo abaixo:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>


1

Você pode usar o raio, mas não vai funcionar no IE: border-radius: 5px 5px;.


1

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>


0

basicamente, isso usa a posição absoluta de div para colocar um caractere nas coordenadas fornecidas. portanto, usando a equação paramétrica para um círculo, você pode desenhar um círculo. se você mudar a posição de div para relativa, isso resultará em uma onda senoidal ...

em essência, estamos fazendo o gráfico de equações abusando da propriedade position. eu não sou muito versado em CSS, então alguém certamente pode tornar isso mais elegante. desfrutar.

isso funciona em todos os navegadores e dispositivos móveis (que eu conheço). eu uso no meu próprio site para desenhar ondas senoidais de texto (www.cpixel.com). a fonte original desse código é encontrada aqui: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

isto é o que eu quero, mas isso é possível para mostrar a lista de círculos dentro do painel mantendo a distância adequada entre os círculos como mostrado aqui plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview
Jinna Balu


-1

Para o círculo, crie um elemento div e digite width = 2 vezes o raio da borda = 2 vezes o preenchimento. Também line-height = 0 Por exemplo, com 50px como raio do círculo, o código abaixo funciona bem:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.