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

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?

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:

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 */
}

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

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

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.

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>

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

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>

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>

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

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>

Adicionando a csspropriedade de:

border-radius: 50%;

para qualquer div torna circular.

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;