是否可以使用css3製作這個特定的形狀？

Question

我知道這是可能的，但我真的不知道該怎麼做。 我也在嘗試使形狀可縮放。

編輯：對不起，問題傢伙，我應該把更多的重點放在我希望它是可擴展的事實。一旦幀寬變小，我不希望divs陷入彼此之間。

Answer 1

可以使用實現它border-radius

HTML：

<div id="a"> 
    <div class="b"> 
    </div> 
    <div class="b"> 
    </div> 
    <div class="b"> 
    </div> 
    <div class="b"> 
    </div> 
</div> 

CSS：

#a{ 
    width:75%; 
    height:5px; 
    background:grey; 
    margin-top:30px; 
    position:relative; 
} 
.b{ 
    height:30px; 
    width:30px; 
    border-radius:15px; 
    background:grey; 
    position:absolute; 
    top:-13px; 

} 
.b:first-child{ 
    left:0; 
} 
.b:last-child{ 
    right:0; 
} 
.b:nth-child(2){ 
    left:28%; 
} 
.b:nth-child(3){ 
    right:28%; 
} 

Fiddle Demo

輸出：

Answer 2

Here's a tutorial關於如何使用HTML5和CSS做到這一點。

Answer 3

這是一個壞的問題，因爲你沒有告訴我們你嘗試過什麼到目前爲止，然而，它是如此簡單，我不得不給你一隻手：example

一個圈可以用正方形的DIV，以進行border-radius: 100%。一行是一個簡單的div。把它們一個接一個地用float: left。

.circle{ 
    width: 40px; 
    height: 40px; 
    border-radius: 100%; 
    background-color: #d5d5d5; 
    float: left; 
} 

.line{ 
    margin-top: 18px; 
    width: 100px; 
    height: 4px; 
    background-color: #d5d5d5; 
    float: left;  
} 

當然，你可以用更多的方法做到這一點。

Answer 4

您可以使用border-radius來獲得類似的效果，用於圈子以及線條的高度或邊框尺寸。 Here's一個你如何做到這一點的快速小提琴。儘管展示你最初的嘗試總是很好，或者你一直在尋找什麼樣的東西。即使你的代碼錯了，它也表明你嘗試了。

.circle { 
    background-color: #ccc; 
    width: 25px; 
    height:25px; 
    border-radius:50px; 
    display: inline-block; 
    margin: 10px -4px; 
} 
.line { 
    width:60px; 
    height:4px; 
    background-color:#ccc; 
    display:inline-block; 
    margin: 20px 0; 
}