Cercle avec deux bordures
Comment puis-je styliser un cercle (un div) avec deux bordures de manière à ce qu'il réagisse à la taille d'un conteneur?
Supposons par exemple des cercles comme celui-ci:
Voici un CSS fonctionnel pour un cercle:
div.circle {
width: 90%;
height: 0;
padding-bottom: 90%;
margin: auto;
float: none;
border-radius: 50%;
border: 1px solid green;
background: pink;
}<div class="circle"></div>Comment puis-je ajouter un bordure avec deux couleurs? J'ai essayé le contour mais il est sorti sous forme de rectangle. J'ai essayé de placer un autre div à l'intérieur du cercle div et d'utiliser la couleur d'arrière-plan mais je ne peux pas aligner verticalement le div intérieur.
Il y a déjà deux très bonnes réponses sur ce fil, mais voici quelques autres approches pour rendre ce fil plus complet avec toutes les approches possibles. Les résultats produits par ceux-ci sont également réactifs.
en utilisant un pseudo-élément:
Vous pouvez utiliser un pseudo-élément de taille inférieure à celle du parent et le positionner absolument dans le parent. Lorsque l'arrière-plan est ajouté au pseudo-élément et qu'une bordure est ajoutée au parent, il semble qu'il y ait un écart entre la bordure et l'arrière-plan. Si l'écart doit être transparent, nous n'avons pas besoin d'ajouter de background sur le parent. Si l'espace doit être d'une couleur unie (c'est-à-dire qu'il doit ressembler à une deuxième bordure), une bordure de cette couleur et de la largeur requise doit être ajoutée au pseudo-élément.
En utilisant cette approche, la zone intérieure peut également avoir une image ou un dégradé comme remplissage (arrière-plan).
.circle {
position: relative;
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: brown;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid white;
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
/* Just for demo */
div {
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body {
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>en utilisant des dégradés radiaux:
Il s'agit également d'une approche possible, mais la prise en charge du navigateur est très faible et, par conséquent, elle n'est pas recommandée, mais l'idée pourrait être utilisée ailleurs. Essentiellement, ce qui se fait est qu'un radial-gradient (de forme circulaire) est ajouté à l'élément de manière à laisser un espace transparent ou de couleur unie (bordure supplémentaire) entre la couleur d'arrière-plan unie et la bordure réelle.
.circle{
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
border: 2px solid brown;
background: radial-gradient(circle at center, brown 66.5%, transparent 68%);
}
.circle.white{
background: radial-gradient(circle at center, brown 66.5%, white 68%);
}
/* Just for demo */
div{
float: left;
margin-right: 10px;
transition: all 1s;
}
div:hover{
height: 250px;
width: 250px;
}
body{
background: url(http://lorempixel.com/500/500/nature/3);
background-size: cover;
}<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>Une autre approche consisterait à utiliser la propriété background-clip . Cela ne vous permettra pas de choisir la couleur de la bordure intérieure, mais cela montrera l'arrière-plan dans cet écart :
div {
width: 150px;
height: 150px;
padding:2px;
border-radius: 50%;
background: #DD4814;
border: 2px solid #DD4814;
background-clip: content-box;
margin:0 auto;
}
/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}<div></div>Notez que vous contrôlez la taille de l'écart avec la valeur de remplissage.
Voici un violon où je dessine un cercle avec une bordure et une ombre pour créer l'effet de cercle extérieur https://jsfiddle.net/salientknight/k18fmepL/1/ Testé et fonctionne dans Chrome, Safari et Opera - Échoue dans Firefox si le texte devient trop grand Bon pour environ 3 caractères taille de police 1em alors la hauteur et la largeur sont désynchronisées - fonctionnera dans FireFox avec une taille et une largeur fixes ...
<!-- Inside H1 -->
<h1><p class='circleBlue'>10000%</p></h1>
<!-- Regular -->
<p class='circleBlue'>10000%</p>
p.circleBlue{
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #159fda;
border: 5px Solid #fff;
color: #fff;
min-width: 1em;
border-radius: 50%;
vertical-align: middle;
padding:20px;
box-shadow: 0px -0px 0px 3px #159fda;
-webkit-box-shadow: 0px -0px 0px 3px #159fda;
-moz-box-shadow: 0px -0px 0px 3px #159fda;
margin:5px;
}
p.circle:before{
content:'';
float: left;
width: auto;
padding-bottom: 100%;
}
mise à jour Je ne pouvais pas faire fonctionner cela avec une variété de tailles de texte et dans tous les navigateurs, j'ai donc ajouté quelques js. Je le colle ici, donc c'est une solution complète tous ensemble. changesSizes est une fonction qui s'assure que la hauteur et la largeur correspondent toujours ... tout d'abord vérifier ce qui est le plus grand, puis définir la valeur des deux au plus grand des deux (oui, l'une de ces affectations est redondante mais cela me donne la tranquillité d'esprit) . L'effet final est que je peux ajouter du contenu de nombreuses formes et tailles. La seule vraie limitation que j'ai trouvée est le goût.
changeSizes(".circleBlue");
//changeSizes(".circleGreen");
//changeSizes(".circleOrange");
---------
function changeSizes(cirlceColor){
var circle = $(cirlceColor);
circle.each(function(){
var cw = $(this).width();
var ch = $(this).height();
if(cw>ch){
$(this).width(cw);
$(this).height(cw);
}else{
$(this).width(ch);
$(this).height(ch);
}
});
}
Example:
