加入一個正方形的div與一個圓形div無縫

Question

我建立了一個有「步驟」的進度條，它通過一個條（div）連接起來。從照片中可以看出，我需要讓酒吧無縫地融入每一個「步驟」。有沒有辦法做到這一點？例如。通過::before和::after，而不引入一些嚴重的定位黑客？

Answer 1

可以再長一點創建:after僞元素，然後每圈之間的空間，然後，以使其在左，右圈它的位置。

如果保證金是20px那麼你可以創建每一行44px例如並設置right: 2px以便有行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>