Cercle avec deux frontières

Comment puis-je style un cercle (un div) avec deux frontières de réactivité, de sorte qu'il réagit à un conteneur de la taille?

Supposons que des cercles comme ceci par exemple:

Ici est un travail CSS pour un cercle:

CSS:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

HTML:

<div class="circle"></div>

Comment puis-je ajouter un frontière avec deux couleurs? J'ai essayé de décrire, mais il est sorti comme un rectangle. J'ai essayé de faire une autre div à l'intérieur du cercle de la vrd et d'utiliser la couleur d'arrière-plan, mais je ne peux pas aligner l'intérieur div verticalement.

Vous pouvez essayer une frontière et un encart de zone d'ombre, mais je ne sais pas du tout d'une propriété CSS pour les deux frontières. Vous êtes mieux de simplement avoir deux divs à l'intérieur les uns des autres.
double possible de CSS cercle avec deux bordures de couleurs différentes ou, au moins, ressemble
Je vous suggère d'accepter David Thomas réponse que celle-ci répond à votre question exigences.

InformationsquelleAutor jjei | 2013-11-30

css css-shapes

Que je vous suggère, avec le code HTML suivant:

<div></div>

Le CSS:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

CSS:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

HTML:

<div></div>

JS Fiddle démo.

La box-shadow donne de l'extérieur de l'anneau de la couleur, de la border donne le blanc 'intérieur de la frontière".

Alternativement, vous pouvez utiliser un box-shadow avec le inset mot-clé, et l'utilisation de la box-shadow pour générer le "inner-frontière" et utiliser le border comme de l'extérieur des frontières:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid red;
    box-shadow: inset 0 0 0 5px white;
}

CSS:

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid red;
  box-shadow: inset 0 0 0 5px white;
}

HTML:

<div></div>

JS Fiddle démo.

Évidemment, ajuster les dimensions de votre propre goût et les circonstances.

À l'aide de la box-shadow pour générer le plus éloigné de la frontière, cependant, permet de multiples frontières (en alternance de rouge et de blanc dans l'exemple suivant):

div {
    width: 20em;
    height: 20em;
    margin: 20px;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}

CSS:

div {
  width: 20em;
  height: 20em;
  margin: 20px;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}

HTML:

<div></div>

JS Fiddle démo.

la solution pour le cercle des œuvres, mais ne pas aligner le texte à l'intérieur.

InformationsquelleAutor David Thomas

Il y a déjà deux très bonnes réponses sur ce fil, mais ici, êtes un couple de plusieurs approches pour faire de ce fil de discussion plus complète avec toutes les approches possibles. La sortie produite par ces sont également sensibles.

À l'aide d'un pseudo-élément:

Vous pouvez utiliser un pseudo-élément qui est plus petite que la taille de la mère et de la position, il était absolument à l'intérieur de la mère. Lorsque l'arrière-plan est ajouté à la pseudo-élément et une bordure est ajoutée à la mère, il semble comme il y a un écart entre la bordure et le fond. Si l'écart doit être transparent puis nous n'avons pas besoin d'ajouter de tout background sur le parent. Si l'écart doit être d'une couleur unie (qui est, il doit ressembler à une deuxième frontière), puis une bordure de la couleur et la largeur requise doit être ajouté à la pseudo-élément.

Tout en utilisant cette approche, la zone intérieure peut également avoir une image ou un dégradé de remplissage (arrière-plan).

CSS:

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

HTML:

<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>
<div class='circle image'>Hello!</div>

En Utilisant Les Dégradés Radiaux:

C'est aussi une approche possible, mais a une très faible prise en charge du navigateur et donc il n'est pas recommandé, mais l'idée pourrait être de les utiliser ailleurs. Essentiellement ce qui est fait est qu'un radial-gradient (de forme circulaire) est ajouté à l'élément tel qu'il laisse un transparent ou d'un solide de couleur écart (en sus de la frontière) entre le massif couleur d'arrière-plan et la frontière actuelle.

CSS:

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

HTML:

<div class='circle'>Hello!</div>
<div class='circle white'>Hello!</div>

InformationsquelleAutor Harry

Une autre approche serait d'utiliser la background-clip de la propriété. Il l'habitude de vous permettre de choisir la couleur de la innner frontière, mais il montrer le fond de ce fossé :

Cercle avec deux frontières

CSS:

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

HTML:

<div></div>

Notez que vous pouvez contrôler la taille de l'espace avec la valeur de remplissage.

InformationsquelleAutor web-tiki

2

Ici est un violon où je dessine un cercle avec une bordure et box-shadow pour créer le cercle extérieur effet https://jsfiddle.net/salientknight/k18fmepL/1/
Testé et fonctionne dans Chrome, Safari et Opera -- Échoue dans Firefox, si le texte est trop grand Bon pour environ 3 caractères taille de la police de cadratin (1 em à la hauteur et la largeur de sortir de la synchronisation -- allons travailler dans FireFox avec une taille fixe de la hauteur et la largeur...
```

<h1><p class='circleBlue'>10000%</p></h1>

<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 obtenir que cela fonctionne avec une variété de tailles de texte et dans tous les navigateurs, donc j'ai ajouté un peu de js. Je suis le coller ici, de sorte que leur est une solution complète tous ensemble. changesSizes est une fonction qui permet de s'assurer que la hauteur et la largeur correspondent toujours... d'abord vérifier ce qui est plus grand et puis en définissant la valeur de la plus grande des deux (oui, un de ces missions est redondant, mais il me donne la paix 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é 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: 
```
InformationsquelleAutor Daniel Lefebvre

Vous devez vous connecter pour publier un commentaire.