Je voudrais entourer un nombre dans un cercle comme dans cette image :
Est-ce possible et comment y parvenir ?
La dernière version actuelle d'Internet Explorer, la 9, prend en charge border-radius. ...et div n'est pas un bon choix pour cela :)
Réponses
Trop de publicités?Voici un Démonstration sur JSFiddle et un extrait :
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>Ma réponse est un bon point de départ, certaines des autres réponses offrent une certaine flexibilité pour différentes situations. Si vous vous préoccupez d'IE8, regardez la page ancienne version de ma réponse.
Pour le faire fonctionner dans fiddle, vous pourriez aller contre un CDN, comme jsdelivr au lieu d'utiliser un chemin relatif pour l'URL. Si vous mettez à jour l'URL dans votre bidule avec //cdn.jsdelivr.net/css3pie/2.0b1/PIE.htc il devrait fonctionner partout sans réoutillage supplémentaire.
@KyleMit : C'est une bonne idée, en théorie. Malheureusement, CSS3 PIE a un limitation au même domaine .
Mike
Points
5108
Le problème avec la plupart des autres réponses est que vous devez ajuster la taille du conteneur extérieur pour qu'il ait la taille parfaite en fonction de la taille de la police et du nombre de caractères à afficher. Si vous mélangez des chiffres à 1 chiffre et des chiffres à 4 chiffres, cela ne fonctionnera pas. Si le rapport entre la taille de la police et celle du cercle n'est pas parfait, vous vous retrouverez avec un ovale ou un petit chiffre aligné verticalement au sommet d'un grand cercle. Cela devrait fonctionner pour n'importe quelle quantité de texte et n'importe quelle taille de cercle. Il suffit de définir le paramètre width et line-height à la même valeur :
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>Si vous devez allonger ou raccourcir le contenu, il vous suffit d'ajuster la largeur du conteneur pour qu'il soit mieux adapté.
C'est exactement le problème que je rencontrais, en affichant un pourcentage à l'intérieur qui pouvait être '1', '10' ou '100'. Cela fonctionne parfaitement, merci !
Note cette suggestion d'édition a été refusée, mais les modifications apportées centrent un peu mieux le texte verticalement, donc je les ai ajoutées à la réponse manuellement.
C'est la meilleure réponse. J'utiliserais translateY(-50%) au lieu de la marge supérieure négative.
Tom N
Points
564
kayahr
Points
4326
Vous pouvez utiliser le border-radius pour cela :
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html> Jouez avec le rayon de la bordure et les valeurs de remplissage jusqu'à ce que vous soyez satisfait du résultat.
Mais cela ne fonctionnera pas dans tous les navigateurs. Je suppose qu'IE ne prend toujours pas en charge les coins arrondis.
N'oubliez pas ` -webkit-border-radius : 15px;` il y a aussi un correctif pour IE htmlremix.com/css/curved-corner-border-radius-cross-browser mais réfléchissez-y à deux fois avant de l'appliquer
bearinthewoods
Points
31
Ma solution ici - cela permet facilement différentes tailles et couleurs et se lie à un CMS pour le contrôle éditorial. Pour l'IE se dégradant en carrés.
HTML :
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>CSS :
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}Il n'est pas trop difficile de voir comment faire. La question la plus importante est de savoir s'il est possible d'adapter les dimensions du cercle au contenu.
Actuellement, je ne pense pas que ce soit possible. Quelqu'un ?
