CSS3 Kreis um einen anderen Kreis mit Platz

Question

Ich brauche etwas wie Sie auf dem Bild sehen. Ich habe bereits die Linie mit Kreisen erstellt, aber ich habe Probleme mit der gelben, die einen Randkreis mit Zwischenraum dazwischen haben sollte.

ich bereits eine Geige mit den Schritten i schon, aber die gelben ist mein Problem. Irgendwelche Vorschläge sind willkommen! jsfiddle

Mein HTML:

<section class="preview"> 
    <ul> 
     <li class="first"> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li class="current"> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li> 
      <div> 
      </div> 
     </li> 
     <li class="last"> 
      <div> 
      </div> 
     </li> 
    </ul> 
</section> 

Meine CSS:

.preview ul li { 
    list-style-type: none; 
    position: relative; 
    width: 1px; 
    margin: 0 auto; 
    padding-top: 35px; 
    background: #fff; 
} 

.preview ul li::after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    transform: translateX(-50%); 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    background: inherit; 
} 

.preview ul li.last { 
    padding-top: 0; 
} 

.preview ul li.current:after { 
    background: #fff934; 
    border: 2px solid #fff934; 
    box-shadow: 1px 1px 0px 5px black; 
} 

Answer 1

Sie benötigen

einen weiteren Kreis mit transparentem Hintergrund mit gelben Grenze für aktuelle Klasse hinzufügen

body { 
 
    font: normal 16px/1.5 "Helvetica Neue", sans-serif; 
 
    background: #456990; 
 
    color: #fff; 
 
    overflow-x: hidden; 
 
    padding-bottom: 50px; 
 
} 
 
.preview ul li { 
 
    list-style-type: none; 
 
    position: relative; 
 
    width: 1px; 
 
    margin: 0 auto; 
 
    padding-top: 35px; 
 
    background: #fff; 
 
} 
 

 
.preview ul li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background: inherit; 
 
} 
 

 
.preview ul li.last { 
 
    padding-top: 0; 
 
} 
 

 
.preview ul li.current:after { /* Code i edited */ 
 
    background: #fff934; 
 
} 
 
.preview ul li.current:before { /* Code i added*/ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -4px; 
 
    transform: translateX(-50%); 
 
    width: 22px; 
 
    height: 21px; 
 
    border-radius: 50%; 
 
    background: transparent; 
 
    border: 1px solid #fff934; 
 
}

<section class="preview"> 
 
    <ul> 
 
     <li class="first"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li class="current"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li class="last"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
</section>

Answer 2

Es gibt einen einfacheren Weg, dies ohne die zusätzliche div innerhalb der li zu tun. Sie setzen einen background mit background-clip: content-box - was dies Ihre background auf den Inhaltsbereich einschränkt, was bedeutet, dass Ihr background nicht unter dem padding oder border Bereich außerhalb des Inhalts angezeigt wird, wenn diese nicht Null sind. Dann geben Sie Ihrem Element eine padding und eine border ungleich Null. Sie haben sowohl die background als auch die border Anzeige und einen transparenten Abstand zwischen ihnen durch die Größe der padding bestimmt.

ul { 
 
    list-style: none; 
 
    background: url(https://i.stack.imgur.com/SVlc8.jpg); 
 
} 
 

 
li { 
 
    margin: .25em; 
 
    border: solid 2px transparent; 
 
    padding: 3px; 
 
    width: 10px; height: 10px; 
 
    border-radius: 50%; 
 
    background: currentColor content-box; 
 
    color: #fff; 
 
} 
 

 
.current { border-color: currentColor; }

<ul> 
 
    <li></li> 
 
    <li class='current'></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

(für eine detailliertere Erläuterung und ähnliche Beispiele, Sie this article about background-clip überprüfen können, schrieb ich im letzten Jahr)

Answer 3

Ein anderer Weg ist die border-style: double Eigenschaft

body { 
 
    font: normal 16px/1.5 "Helvetica Neue", sans-serif; 
 
    background: #456990; 
 
    color: #fff; 
 
    overflow-x: hidden; 
 
    padding-bottom: 50px; 
 
} 
 
.preview ul li { 
 
    list-style-type: none; 
 
    position: relative; 
 
    width: 1px; 
 
    margin: 0 auto; 
 
    padding-top: 35px; 
 
    background: #fff; 
 
} 
 

 
.preview ul li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background: inherit; 
 
} 
 

 
.preview ul li.last { 
 
    padding-top: 0; 
 
} 
 
/* edits made to this */ 
 
.preview ul li.current:after { 
 
    background: #fff934; 
 
    border: 5px double #456990; 
 
    top: -4px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<section class="preview"> 
 
    <ul> 
 
     <li class="first"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li class="current"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div> 
 
      </div> 
 
     </li> 
 
     <li class="last"> 
 
      <div> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
</section> 
 
</body> 
 
</html>

Answer 4

Sie können box-shadow für den äußeren Kreis und linear-gradient für die vertikale Linie verwenden. so wenige Zeilen Code, um das Layout zu erreichen.

ul { 
 
    list-style: none; 
 
    padding: 15px 30px; 
 
    background: teal linear-gradient(to bottom, silver, silver) 36px 0/1px auto repeat-y; 
 
} 
 
li { 
 
    background: white; 
 
    border-radius: 50%; 
 
    width: 12px; 
 
    height: 12px; 
 
    margin: 20px 0; 
 
} 
 
.current { 
 
    background: gold; 
 
    box-shadow: 0 0 0 4px teal, 0 0 0 5px gold; 
 
}

<ul> 
 
    <li></li> 
 
    <li class="current"></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>