Dessiner un cercle en utilisant uniquement du css

Question

Est-il possible de dessiner un cercle en utilisant uniquement des css qui peuvent fonctionner sur la plupart des navigateurs (IE, Mozilla, Safari) ?

Answer 1

Oui, dessinez une boîte et donnez-lui un rayon de bordure qui correspond à la moitié de la largeur de la boîte :

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Démonstration de travail :

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

<div id="circle"></div>

Answer 2

Vous pourriez utiliser un .before avec un contenu contenant un symbole unicode pour un cercle (25CF).

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}

<span class="circle"></span>

Je suggère ceci car border-radius ne fonctionne pas dans IE8 et en dessous (je reconnais le fait que la suggestion est un peu mentale).

Answer 3

• Créez un div avec une hauteur et une largeur définies (ainsi, pour un cercle, utilisez la même hauteur et la même largeur), formant un carré.
• ajouter un border-radius de 50% ce qui lui donnera une forme circulaire. (remarque : aucun préfixe n'a été exigé pour une longue période )

• Vous pouvez ensuite jouer avec background-color / gradients / (pair pseudo elements ) pour créer quelque chose comme ceci :

  .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } .sphere { height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; } .sphere::after { background-color: rgba(255, 255, 255, 0.3); content: ''; height: 45%; width: 12%; position: absolute; top: 4%; left: 15%; border-radius: 50%; transform: rotate(40deg); }

  <div class="sphere red"></div> <div class="sphere green"></div> <div class="sphere blue"></div> <div class="sphere yellow"></div> <div class="sphere"></div>

Answer 4

Le rayon de la bordure est une bonne option. Si vous avez des difficultés avec les anciennes versions d'IE, essayez les codes HTML.

•

et utiliser le css pour changer la couleur. Sortie :

-

Answer 5

Cela fonctionnera dans tous les navigateurs

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}