html - 如何从中心用虚线连接圆圈？

Question

我连续有 3 个圆圈，我想用虚线从中心将它们连接起来，这是与我想要的类似的屏幕截图:

这是html代码:

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-push-3 col-xs-6 text-center">
           <div class="col-xs-3">
               <div class="wrapper">
                   <span class="circle text-center">A</span> 
                   <span class="dash_line" style="transform: translate(232%, -215%);">---</span>
               </div> <!-- wrapper -->
           </div> <!-- col-xs-3 -->
           <div class="col-xs-6">
               <div class="wrapper">
                   <!--<span class="dash_line">---</span>-->
                   <span class="circle text-center">B</span> 
                   <!--<span class="dash_line">---</span>-->
               </div> <!-- wrapper -->
          </div> <!-- col-xs-6 -->
          <div class="col-xs-3">
              <div class="wrapper">
                  <span style="    transform: translate(-114%, 135%);" class="dash_line">-----</span>
                  <span class="circle text-center">C</span> 
              </div> <!-- wrapper -->   
          </div> <!-- col-xs-3 -->
        </div> <!-- col-xs-6 -->
    </div> <!-- row -->
</div> <!-- container-fluid -->

这是自定义 CSS:

.row{
    margin:5% auto
}

.circle {
    border-radius: 50%;
    border: 1px solid #d1cfc8;
    background-color: #f7eebe;
    padding: 15% 35%;
    font-size: 300%;
    display: inline-block
}

.dash_line{
    position: absolute;
    transform: translateY(50%);
}

这是一个现场观看的 fiddle : http://jsfiddle.net/mpvf5rxa/37

如您所见，我为每条虚线使用了特定值，我希望它是动态的。

我不介意更改元素，添加/删除元素。

我也不介意使用 Javascript/Jquery 来实现这一点。

Answer 1

编辑，因为您使用的是 bootstrap 3 ，所以可以改用另一种带有伪和边距的方法:

.ABC {
  text-align: center;
}
.ABC span {
  padding: 1vw 2.8vw; /* any values of yours */
  font-size: 5vw; /* any values of yours */
  border: 1px solid; /* any values of yours */
  border-radius: 50%;
  display: inline-block;/* to trigger block formatting context .vertical padding + pseudo */
}
span + span /* filter out first span */{
  margin-left:5vw;/* equals width of dashed line */
}
span + span::before {/* do not draw anything from first span */
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin-left:-7.8vw;
  margin-right:2.8vw;/* equal span padding*/
  width:5vw;
  border-top:dashed;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row ABC">
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
</div>

---

认为涉及 bootsrap 4 的原始答案。

如果你只有 3 个元素用虚线分隔，你可以使用 pseudos、order、内置的 bootsrap 类和更少的标记:

我在这里添加了 ABC 类以轻松选择这一行，但您可以使用任何其他类或 ID。

.ABC span {
  padding:1vw 2.8vw;/* any values of yours */
  font-size:5vw;/* any values of yours */
  border:1px solid;/* any values of yours */
  border-radius:50%;
  order:0;/* defaut*/
}
.ABC span + span {
  order:2;/* leave order:1 for one pseudo */
}
.ABC span:last-of-type {
  order:4;/* leave order:3 for the other pseudo */
}
.ABC:before,
.ABC:after {
  content:'';
  width:5vw;/* whatever size you need */
  order:1;
  border-top:dashed;
}
.ABC:after {
  order:3;
}

.ABC:after {
  order: 3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center align-items-center ABC">
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
</div>