css - 连接多个 div/进度条的自定义 CSS 行

Question

我想创建将 3 个 div 连接在一起的圆 Angular 线，如下图所示。我尝试使用 css border radius 但不确定如何使它们看起来像下图一样连接。

<div class="progress bar"> 29</div>

<div class="box"></div>

<div class="progress bar"> 28</div>

.box{
  width:500px; height:100px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
} 

Answer 1

你可以试试这样的伪元素:

.progress {
  position:relative;
  margin:50px;
  padding:5px;
  border:5px solid blue;
  width:20px;
  border-radius:50%;
  text-align:center;
  background: #fff;
}
.right:after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    top: 15px;
    right: -38px;
    height: 80px;
    width: 80px;
    border-right: 5px solid blue;
}
.left:after {
    content: " ";
    position: absolute;
    border-radius: 50%;
    top: 15px;
    left: -38px;
    height: 80px;
    width: 80px;
    border-left: 5px solid blue;
}
.dotted-left:after {
  border-left: 5px dotted blue;
}
.dotted-right:after {
  border-right: 5px dotted blue;
}
.dotted-progress {
  border-style:dotted;
}

<div class="progress right"> 29</div>
<div class="progress left dotted-left"> 28</div>
<div class="progress dotted-progress"> 28</div>