是否可以仅使用css3制作此特定形状？

Question

我知道这是可能的，但我真的不知道该怎么做。 我也试图使形状可扩展。

编辑：对不起那些不好的问题，我应该更加强调我希望它可扩展的事实。一旦帧宽变小，我不希望div在彼此之下。

Answer 1

您可以使用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;
}

Answer 2

您可以使用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 3

这是一个糟糕的问题，因为你没有告诉我们到目前为止你尝试过什么，但是，这很简单，我不得不帮你一把：example

可以使用带有border-radius: 100%的方形div制作圆圈。一条线是一个简单的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

Here's a tutorial关于如何使用HTML5和CSS进行操作。