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

Question

Je me demande s'il existe un moyen plus facile de créer des divs circulaires que ce que je fais actuellement.

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

Existe-t-il un CSS pour créer des div qui sont circulaires et je peux spécifier le rayon?

Answer 1

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 faire ce travail dans IE8 et plus, vous devez télécharger et utiliser CSS3 PIE. Mon démo ci-dessus ne fonctionne pas avec IE8, mais c'est seulement parce que jsFiddle ne pas héberger PIE.htc.

Mon démo ressemble à ceci:

Answer 2

Définir le rayon 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 */
}
 

Answer 3

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

Answer 4

Il est effectivement possible.

Voir: CSS Astuce: Comment Faire des Cercles Sans les Images. Voir la démo.

Mais attention, Il a de graves inconvénients en termes de compatibilité, fondamentalement, vous faites un cat de l'écorce.

Le voir travailler ici

Comme vous le verrez vous suffit de régler l' height et width à la moitié de la border-radius

Bonne chance!

Answer 5

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