Javascript Girl
  1. Javascript Girl
  3. Css3 cercles réactifs connectés par une ligne?
Intereting Posts
Exécuter javascript sur le serveur IIS Localisation <asp: FileUpload>. Problème IE AngularJS: $ routeProvider lors de la résolution $ http renvoie la réponse obj au lieu de mon obj OR à bit à l'aide de ruby ​​vs javascript Comment puis-je détecter le pays du visiteur et le rediriger vers un site Web spécifique? AngularJS | Le filtre orderBy n'est pas mis à jour dynamiquement Quelle est la différence entre JavaScript et jQuery? AJAX: envoi d'un formulaire sans actualiser la page Vérifiez si la fenêtre est centrée Superposer une div transparente, qui, lorsqu'elle est cliquée, disparaît Modifier la zone de texte HTML: Écraser au lieu d'insérer en tant que types d'utilisateur Devrais-je rendre ce modèle en utilisant JavaScript ou le serveur? Pourquoi les éléments du formulaire ne doivent-ils pas être soumis? This.key dans React.js 0.12 Comment appeler / lier un jquery datepicker à une étiquette ou div au lieu d'un champ de saisie

Css3 cercles réactifs connectés par une ligne?

Salut, j'essaie de créer une div avec des cercles réactifs connectés par une ligne en utilisant css3.

Exemple de ce que j'essaie de faire http://codepen.io/bookcasey/pen/cEntL

Dans l'exemple ci-dessus, je veux le rendre réactif de sorte que la taille du cercle ne change pas, mais si la largeur augmente, je veux que les premiers et les derniers cercles soient sur le côté gauche et le côté droit de l'UL et que les autres cercles se situent entre des distances égales. Les cercles peuvent augmenter ou diminuer le moins est deux cercles et une ligne.

Vous pourriez utiliser la solution de Justify la dernière ligne de div? Afin de la rendre pleine largeur.

Et falsifiez la ligne avec des pseudo-éléments absolument positionnés.

Démonstration 

ul { text-align: justify; position: relative; overflow: hidden; } ul:before, .active:after { content: ''; width: 100%; border: 2px solid dodgerblue; position: absolute; top: 1em; margin-top: -2px; z-index: -1; } .active:after { border-color: lightblue; } ul:after { content: ""; display: inline-block; width: 100%; } li { width: 2em; height: 2em; text-align: center; line-height: 2em; border-radius: 50%; background: dodgerblue; margin: 0 1em; display: inline-block; color: white; } .active ~ li { background: lightblue; } body { font-family: sans-serif; padding: 2em; }

J'ai résolu en utilisant des flotteurs, avant l'élément comme cercle et après comme connexion:

SOLUTION 

 li { width: 14%; text-align: center; line-height: 2em; float: left; color: white; position: relative; } li:before{ content: ''; position: absolute; top: 0; left: calc(50% - 1em); width: 2em; height: 2em; border-radius: 1em; background: dodgerblue; z-index: -1; } li:after{ content: ''; position: absolute; top: .9em; left: calc(50% + 1em); width: 100%; height: .2em; background: dodgerblue; z-index: -1; }

Si vous souhaitez ajouter un bloc de texte en dessous de chaque numéro, je suis allé de l'avant et l'ai fait aussi! Vérifiez sur CodePen

Entrez la description de l'image ici

HTML 

 <ul> <li><span class="marker-number">1</span> <span class="marker-text">Select Car</span></li> <li class="active"><span class="marker-number">2</span> <span class="marker-text">Questions</span></li> <li><span class="marker-number">3</span> <span class="marker-text">Problems</span></li> <li><span class="marker-number">4</span> <span class="marker-text">Inspection</span></li> <li><span class="marker-number">5</span> <span class="marker-text">Solution</span></li> </ul>

CSS 

 ul { text-align: justify; position: relative; overflow: hidden; } ul:before, .active:after { content: ''; width: 100%; border: 2px solid #21a2d1; position: absolute; top: 1em; margin-top: -6px; z-index: -1; } .active:after { border-color: #b7b7b7; } ul:after { content: ""; display: inline-block; width: 100%; } li { width: 1.5em; height: 1.5em; text-align: center; line-height: 1.7em; border-radius: 50%; background: #21a2d1; margin: 0 1em; display: inline-block; color: white; font-size: 1em; } .marker-number { font-size: 14px; } li.active { background: #04497b; } .active ~ li { background: #b7b7b7; } span.marker-text { color: #7d7d7d; font-size: 12px; line-height: 16px; width: 70px; display: block; margin-left: -21px; margin-top: 2px; font-style: italic; font-family: Arial; }