Un modo più semplice per creare div circle rispetto all'uso di un'immagine?

Mi chiedo se esiste un modo più semplice per creare div circolari rispetto a quello che sto facendo ora.

Attualmente, sto solo creando un'immagine per ogni dimensione diversa, ma è fastidioso farlo.

Esistono comunque dei CSS per creare div che sono circolari e posso specificare il raggio?

Ecco una demo: 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>

Per farlo funzionare in IE8 e versioni precedenti , è necessario scaricare e utilizzare CSS3 PIE . La mia demo sopra non funzionerà in IE8, ma è solo perché jsFiddle non ospita PIE.htc.

La mia demo si presenta così:

Impostando il raggio del bordo di ciascun lato di un elemento al 50% si creerà la visualizzazione del cerchio di qualsiasi dimensione:

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

Prova questo

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

In realtà è possibile.

Vedi: CSS Suggerimento: come creare cerchi senza immagini . Vedi la demo .

Ma attenzione, ha fondamentalmente degli svantaggi in termini di compatibilità, stai facendo una corteccia di gatto.

Vedi che funziona qui

Come vedrai, devi solo impostare il heighte la widthmetà delborder-radius

In bocca al lupo!

C'è anche [la cattiva idea di] usare diversi (20+) div 1px orizzontali o verticali per costruire un cerchio. Questo plugin jQuery utilizza questo metodo per costruire forme diverse.

Dare larghezza e altezza a seconda delle dimensioni, ma mantenere entrambi uguali

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

Volevo solo menzionare un'altra soluzione che risponde alla domanda "Un modo più semplice per creare div cerchio piuttosto che usare un'immagine?" che è usare FontAwesome.

Importa il file CSS fontawesome o dalla CDN qui

e poi semplicemente:

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

e puoi dargli qualsiasi colore tu voglia qualsiasi dimensione del carattere.

Puoi provare la radial-gradientfunzione 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+ */
}

Applicalo a un divlivello:

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

Diciamo che hai questa immagine:

per farne un cerchio devi solo aggiungere

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

Quindi se hai un div puoi fare la stessa cosa.

Controlla l'esempio seguente:

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

È possibile utilizzare il raggio ma non funziona su IE: border-radius: 5px 5px;.

fondamentalmente questo usa l'assoluta posizione di div per posizionare un personaggio in corrispondenza delle coordinate indicate. quindi usando l'equazione parametrica per un cerchio, puoi disegnare un cerchio. se dovessi cambiare la posizione del div in relativo, risulterebbe un'onda sinusoidale ...

in sostanza stiamo rappresentando graficamente le equazioni abusando della proprietà position. non sono esperto in CSS, quindi qualcuno può sicuramente renderlo più elegante. godere.

funziona su tutti i browser e dispositivi mobili (di cui sono a conoscenza). lo uso sul mio sito Web per disegnare onde sinusoidali di testo (www.cpixel.com). la fonte originale di questo codice si trova qui: 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>

Aggiunta della cssproprietà di:

border-radius: 50%;

a qualsiasi div lo rende circolare.

Per il cerchio, crea un elemento div e inserisci larghezza = 2 volte il raggio del bordo = 2 volte il riempimento. Anche line-height = 0 Ad esempio, con 50 px come raggio del cerchio, il codice seguente funziona bene:

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