Un moyen plus simple de créer un cercle div que d'utiliser une image?

Je me demande s'il existe un moyen plus simple de créer des div circulaires que ce que je fais maintenant.

Actuellement, je fais juste une image pour chaque taille différente, mais c'est ennuyeux de le faire.

Est-il possible d'utiliser du CSS pour créer des divs circulaires et que je peux spécifier le rayon?

Voici une démo: 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>

Pour que cela fonctionne dans IE8 et les versions antérieures , vous devez télécharger et utiliser CSS3 PIE . Ma démo ci-dessus ne fonctionnera pas dans IE8, mais c'est uniquement parce que jsFiddle n'héberge pas PIE.htc.

Ma démo ressemble à ceci:

Définir le rayon de bordure de chaque côté d'un élément à 50% créera l'affichage du cercle à n'importe quelle taille:

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

Essaye ça

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

C'est en fait possible.

Voir: Conseil CSS: Comment créer des cercles sans images . Voir la démo .

Mais attention, cela présente de sérieux inconvénients en termes de compatibilité en gros, vous faites aboyer un chat.

Le voir fonctionner ici

Comme vous le verrez - vous suffit de mettre en place la heightet widthà la moitié duborder-radius

Bonne chance!

Il y a aussi [la mauvaise idée d'utiliser] plusieurs (20+) divs 1px horizontaux ou verticaux pour construire un cercle. Ce plugin jQuery utilise cette méthode pour construire différentes formes.

Donnez la largeur et la hauteur en fonction de la taille mais gardez les deux égaux

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

Je voulais juste mentionner une autre solution qui répond à la question "Un moyen plus simple de créer un cercle div qu'en utilisant une image?" qui consiste à utiliser FontAwesome.

Vous importez le fichier css fontawesome ou depuis le CDN ici

et ensuite vous venez de:

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

et vous pouvez lui donner n'importe quelle couleur que vous voulez n'importe quelle taille de police.

Vous pouvez essayer la radial-gradientfonction 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+ */
}

Appliquez-le à un divcalque:

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

Disons que vous avez cette image:

pour en faire un cercle, il vous suffit d'ajouter

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

Donc, si vous avez un div, vous pouvez faire la même chose.

Consultez l'exemple ci-dessous:

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

Vous pouvez utiliser le rayon mais il ne fonctionnera pas sur IE: border-radius: 5px 5px;.

fondamentalement, cela utilise la position absolue de div pour placer un caractère aux coordonnées données. donc en utilisant l'équation paramétrique pour un cercle, vous pouvez dessiner un cercle. si vous deviez changer la position de div en relative, cela entraînera une onde sinusoïdale ...

en substance, nous représentons des équations en abusant de la propriété de position. Je ne connais pas bien le CSS, donc quelqu'un peut sûrement rendre cela plus élégant. prendre plaisir.

cela fonctionne sur tous les navigateurs et appareils mobiles (dont je suis au courant). Je l'utilise sur mon propre site Web pour dessiner des ondes sinusoïdales de texte (www.cpixel.com). la source originale de ce code se trouve ici: 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>

Ajout de la csspropriété de:

border-radius: 50%;

à n'importe quel div le rend circulaire.

Pour cercle, créez un élément div, puis entrez width = 2 fois le rayon de la bordure = 2 fois le remplissage. Aussi line-height = 0 Par exemple, avec 50px comme rayons du cercle, le code ci-dessous fonctionne bien:

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