CSS3スペースのある別の円の周り

Question

私はあなたが写真のように何かを作成する必要があります。 私はすでに円で線を作成しましたが、間にスペースを入れて境界線を描く黄色の問題があります。

私はすでに私が既に持っている段階でフィドルを作成したが、黄色の1は私の問題です。どんな提案も歓迎です！ 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

liの中に余分なdivがないと、これを行う簡単な方法があります。 backgroundをbackground-clip: content-boxと設定すると、backgroundがコンテンツ領域に制限されます。つまり、backgroundは、コンテンツが0以外の場合はpaddingまたはborder領域の下に表示されません。あなたの要素に0以外の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>