四角形のdivを円形のdivにシームレスに結合する

Question

バー（div）で結合された「steps」を持つプログレスバーを作成しました。写真に見られるように、バーを各「ステップ」にシームレスに参加させる必要があります。これを行う方法はありますか？例えば。いくつかの深刻な位置情報ハッキングを導入することなく、::beforeと::after経由でですか？

Answer 1

あなたはその後、少し長く、各サークルの間にスペースを:after擬似要素を作成し、これが左右の円の下に行くようにそれを配置することができます。

マージンが20px、あなたはたとえば各行44pxを作成して、ラインの2pxは両側の円の下に存在するようにright: 2pxを設定することができている場合。

ul { 
 
    display: flex; 
 
    font-size: 20px; 
 
    list-style: none; 
 
} 
 
li { 
 
    width: 70px; 
 
    height: 70px; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
    position: relative; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    margin: 0 20px; 
 
} 
 
li:not(:last-child):after { 
 
    content: ''; 
 
    height: 15px; 
 
    width: 44px; 
 
    background: green; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 2px; 
 
    transform: translate(100%, -50%); 
 
    z-index: -1; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

Answer 2

このような何か？色づけはもう少し注意が必要なものです。

.container { 
 
    display: table; 
 
    margin: 5px 0 0 5px; 
 
    border: thin solid gray; 
 
    background: linear-gradient(to right, #3f4c6b 0%,#c675c1 100%); 
 
} 
 

 
.bar-side { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    width: 50px; 
 
    height: 100px; 
 
} 
 

 
.bar-middle { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.bar { 
 
    height: 30px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
    border: thin solid darkgray; 
 
    display: inline-block; 
 
} 
 

 
.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    border: thin solid darkgray; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-size: 50px; 
 
}

<div class="container"> 
 
    <div class="bar-side"> 
 
    <div class="bar"></div> 
 
    </div> 
 
    <div class="circle">2</div> 
 
    <div class="bar-middle"> 
 
    <div class="bar"></div> 
 
    </div> 
 
    <div class="circle">3</div> 
 
    <div class="bar-side"> 
 
    <div class="bar"></div> 
 
    </div> 
 
</div>