CSS3中的連接圈

Question

我想用CSS3中的線段連接我的圈子，但是我不知道該怎麼做。

.circle 
 
{ 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background-color: orange; 
 
    border: 2px black solid; 
 
}

<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div>

Answer 1

.circle 
 
{ 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background-color: orange; 
 
    border: 2px black solid; 
 
    position: relative; 
 
} 
 

 
.circle:before { 
 
    content: ""; 
 
    height: 5px; 
 
    width: 20px; 
 
    background: #000; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    right: -20px; 
 
} 
 

 
.circle.last:before { 
 
    display: none; 
 
}

<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle"></div> 
 
<div class="circle last"></div>

Answer 2

嘗試添加一行的div像這樣：

<div class="circle"></div> 
<div class="line"></div> 
<div class="circle"></div> 
<div class="line"></div> 
<div class="circle"></div> 
<div class="line"></div> 
<div class="circle"></div> 

從這裏，那麼你將不得不對他們在CSS正確定位。 您可以製作一個非常小的固定高度和寬度，並在其上放置一個邊框以製作一條線。