CSS3 кругом вокруг другого круга с пробелом

Question

Мне нужно создать что-то вроде того, что вы видите на картинке. Я уже создал линию с кругами, но у меня проблемы с желтой, которая должна иметь круг границы вокруг пространства.

Я уже создал скрипку с шагами я уже есть, но желтый одна моя проблема. Любые предложения приветствуются! jsfiddle

Мой 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> 

Мой 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

Вам нужно добавить еще один круг с прозрачным фоном с желтой каймой для текущего класса

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

Существует более простой способ сделать это без дополнительных div внутри li. Вы устанавливаете background с background-clip: content-box - это ограничивает ваш background в области содержимого, а это значит, что ваш background не будет отображаться под областью или border вне содержания, если они отличные от нуля. Затем вы даете элементу ненулевое значение padding и border. У вас будут как background, так и border показ и прозрачное пространство между ними, определяемое размером padding.

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>

(для более подробного объяснения и другие подобные примеры, вы можете проверить this article about background-clip я написал в прошлом году)

Answer 3

Другой способ использует border-style: double свойство

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

Вы можете использовать box-shadow для наружного круга и linear-gradient для вертикальной линии. поэтому очень мало строк кода для достижения макета.

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>