web-dev-qa-db-fra.com

Dessiner un cercle en utilisant css seul

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

htmlcsscss-shapes
114
Hector Barbossa

Vous pouvez utiliser un .before avec un contenu avec un symbole Unicode pour un cercle (25CF).

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}
<span class="circle"></span>

Je suggère que cela car border-radius ne fonctionnera pas dans IE8 et inférieur (je reconnais le fait que la suggestion est un peu mentale).

137
Tom

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

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

Démo de travail:

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

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
<div id="circle"></div>
186
Tatu Ulmanen
  • Créez un div avec une hauteur et une largeur définies (donc, pour un cercle, utilisez les mêmes hauteur et largeur), en formant un carré.
  • ajoutez un border-radius de 50% ce qui le rendra de forme circulaire. (note: aucun préfixe n'a été requis pour un long time )
  • Vous pouvez ensuite jouer avec background-color/gradients/(même 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>
39
jbutler483

le rayon de la bordure est une bonne option, si vous avez des problèmes avec les anciennes versions IE, essayez les codes HTML

&#8226;

et utilisez css pour changer de couleur. Sortie:

•

12
Sunit

Cela fonctionnera dans tous les navigateurs

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

oui .. voici mon code:

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>
9
user1999828

oui, il est possible d'utiliser la propriété CSS border-radius. Pour plus d'informations, regardez http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity

7
shankhan