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


186

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?


1
Dans quels navigateurs cela doit-il être pris en charge?
Thirtydot

Jetez un œil à ma réponse à cette question connexe, en particulier les démos: stackoverflow.com/questions/4451350/…
Orbling

1
Vous pouvez également utiliser SVG (VML) pour créer un cercle.
jasssonpet

2
Pourquoi ne pouvez-vous pas redimensionner la largeur et la hauteur de votre image au lieu de créer des tailles différentes? Quelle est la taille de ces images?
Mottie

Réponses:


298

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:


Je ne peux pas faire de div circulaire en chrome. Cela fonctionne dans Mozilla cependant..Mon url est chokate.maninactionscript.com/chokates cliquez sur l'image du désert ou sur celle qui précède le div affiché sur le zoom de l'image n'est pas circulaire..qui est à Mozilla.
techie_28

1
@ techie_28: Le divsur votre page est rond, ce que vous pouvez voir si vous y ajoutez par exemple border: 5px solid red. Le problème est que les parties de l'image qui "surplombent le cercle" ne sont pas cachées. Aucune des solutions de contournement habituelles n'est particulièrement facile à appliquer ici. Je suggère d'utiliser la -webkit-mask-imagepropriété pour réparer les navigateurs WebKit (et conserver border-radius, pour les autres navigateurs). Plus d'informations ici: webkit.org/blog/181/css-masks . Vous pouvez également envisager de poser une question ici sur Stack Overflow, pour voir si quelqu'un d'autre a d'autres idées.
thirtydot

1
Vous pouvez également faire 100% au lieu de 999px.
Tony Wickham

1
.htc n'est plus pris en charge.
Oliver Dixon

Je me demande comment aligner des objets (comme des boutons) à l'intérieur d'un div rond! : D
Zibri

29

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 */
}

1
C'est probablement la méthode qui devrait être utilisée maintenant (en 2017).
Scribblemacher

13

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

6

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!


Salut, merci pour votre jsfiddlelien! Ce lien est le seul qui fonctionne à partir de votre réponse pour le moment. ;)
TooroSan

3

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.


3

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
border-radius: 50%;est assez.
MattAllegro

3

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


2

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>

2

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>


1

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


1

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>


0

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>

c'est ce que je veux, mais est-ce possible d'afficher la liste des cercles dans le panneau en maintenant la bonne distance entre les cercles, comme indiqué ici plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview
Jinna Balu

0

Ajout de la csspropriété de:

border-radius: 50%;

à n'importe quel div le rend circulaire.


-1

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;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.