web-dev-qa-db-fra.com

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

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

Actuellement, je ne fais que créer une image pour chaque taille différente, mais c'est agaçant de le faire.

Est-ce que CSS utilise toujours pour faire des div qui sont circulaires et que je peux spécifier le rayon?

htmlcsscirclecss-shapes
155
bmaster

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:

268
thirtydot

Si vous définissez le rayon de bordure de chaque côté d’un élément sur 50%, l’affichage du cercle sera créé à n’importe quelle taille:

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

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

C'est effectivement possible.

Voir: Astuce CSS: Comment créer des cercles sans images . Voir demo .

Mais soyez averti, il présente de gros inconvénients en termes de compatibilité, vous êtes en train d'aboyer un chat.

_ {Cela fonctionneici

Comme vous le verrez, il vous suffit de configurer height et width à la moitié du border-radius

Bonne chance!

6
Trufa

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>

3
vinayak hegde

.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 facile de créer un cercle div que d'utiliser une image?" qui consiste à utiliser FontAwesome.

Vous importez le fichier css fontawesome ou à partir du CDN ici

et alors vous venez:

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

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

3
user3494047

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

3
kelloti

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

2
HAJJAJ

Disons que vous avez cette image:

pour en faire un cercle, il suffit d’ajouter

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

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

Vérifiez 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>
0
Carlos Abraham

en gros, 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 produirait une onde sinusoïdale ...

essentiellement, nous traçons des équations en abusant de la propriété de position. Je ne suis pas très bien versé en CSS, donc quelqu'un peut certainement rendre cela plus élégant. prendre plaisir.

cela fonctionne sur tous les navigateurs et les appareils mobiles (que je sache). 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>
0
sickz

Vous pouvez essayer la fonction CSS radial-gradient:

.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 à une couche div:

<div class="circle"></div>
0
Er M. K. Gupta

Ajout de la propriété css de:

border-radius: 50%; 

à toute div le rend circulaire. 

0
Eshiett Oto-obong