Question

如何制作以下每个div有一个＆＃34;圈＆＃34;连接到多个div左侧的行？

这方面的一个例子是： https://www.ruxit.com/ruxit/survey.html

如何复制此效果/边框？

Answer 1

如果您在所提供的网站上检查有问题的元素，您可以看到使用:before伪元素完成圆圈，并使用:after伪元素完成该行。

以下是对jsfiddle

的快速模拟

CSS：

.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';
    display:block;
    float:left;
    border-radius:50%;
}
.border:after
{
    content:'';
    display:block;
    background-color:blue;
    height:100%;
    width: 1px;
    left:0.55em;
    margin-top:-1px;
    position:relative;
}

here是King Kong使用border-left的改进版本，它解决了使用长字符串时:after不出现的问题：

HTML：

<div class="border" style="height:75px;">hey</div>
<div class="border" style="height:50px;">hey2</div>
<div class="border" style="height:150px;">hey3</div>
<div class="border end">done</div>

CSS：

.border {
    padding-left:20px;
    position:relative;
    margin-left:0.6em;
    box-sizing:border-box;
}
.border:not(.end) {    
    border-left:1px solid blue;        
}
.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';    
    border-radius:50%;
    position:absolute;
    left:-0.6em;
    top:0;
}

Answer 2

HTML

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

CSS

.line .col3{
   float: left;
   position: relative;
   top: -8px;
   width: 288px;
}

见jsfiddle

http://jsfiddle.net/kisspa/n5m7x/

如何在html中使用圆圈制作边框？

2 个答案: