¿Es la forma más fácil de crear un círculo dividido que usar una imagen?

Me pregunto si hay una manera más fácil de crear divisiones circulares que lo que estoy haciendo ahora.

Actualmente, solo estoy haciendo una imagen para cada tamaño diferente, pero es molesto hacerlo.

¿Hay alguna forma de usar CSS para hacer divs que son circulares y puedo especificar el radio?

Aquí hay una demostración: 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 que esto funcione en IE8 y versiones anteriores , debe descargar y usar CSS3 PIE . Mi demostración anterior no funcionará en IE8, pero eso es solo porque jsFiddle no aloja PIE.htc.

Mi demo se ve así:

Establecer el radio del borde de cada lado de un elemento al 50% creará la visualización del círculo en cualquier tamaño:

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

Prueba esto

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

De hecho es posible.

Ver: Consejo CSS: Cómo hacer círculos sin imágenes . Ver demo .

Pero ten cuidado, tiene serias desventajas en términos de compatibilidad, básicamente, estás haciendo un ladrido de gato.

Véalo trabajando aquí

Como verá usted sólo tiene que configurar el heighty widthla mitad de laborder-radius

¡Buena suerte!

También está [la mala idea de] usar varios (20+) divs horizontales o verticales de 1px para construir un círculo. Este complemento jQuery utiliza este método para construir diferentes formas.

Proporcione ancho y alto según el tamaño, pero mantenga ambos iguales

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

Solo quería mencionar otra solución que responde a la pregunta "¿Una forma más fácil de crear un círculo dividido que usar una imagen?" que es usar FontAwesome.

Importa el archivo css de fontawesome o desde el CDN aquí

y luego simplemente:

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

y puede darle el color que desee de cualquier tamaño de fuente.

Puedes probar la radial-gradientfunción 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+ */
}

Aplicarlo a una divcapa:

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

Digamos que tienes esta imagen:

para hacer un círculo de esto solo necesitas agregar

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

Entonces, si tienes un div, puedes hacer lo mismo.

Verifique el siguiente ejemplo:

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

Puede usar el radio pero no va a trabajar en IE: border-radius: 5px 5px;.

Básicamente, esto utiliza la posición absoluta de div para colocar un carácter en las coordenadas dadas. entonces, usando la ecuación paramétrica para un círculo, puedes dibujar un círculo. si fuera a cambiar la posición del div a relativa, se generaría una onda sinusoidal ...

en esencia, estamos graficando ecuaciones al abusar de la propiedad de posición. No estoy bien versado en CSS, por lo que alguien seguramente puede hacer esto más elegante. disfrutar.

esto funciona en todos los navegadores y dispositivos móviles (que yo sepa). Lo uso en mi propio sitio web para dibujar ondas sinusoidales de texto (www.cpixel.com). La fuente original de este código se encuentra aquí: 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>

Agregar la csspropiedad de:

border-radius: 50%;

a cualquier div lo hace circular.

Para el círculo, cree un elemento div y luego ingrese ancho = 2 veces el radio del borde = 2 veces el relleno. También line-height = 0 Por ejemplo, con 50px como radios del círculo, el siguiente código funciona bien:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;