自定义CSS线连接多个div /进度条

Question

我想创建将3个div连接在一起的圆形线条，如下图所示。我尝试使用css边框半径，但不知道如何使它们看起来像下面的图像连接。

<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>

Answer 2

您可以使用：

/* Rotate from top left corner (not default) */
-webkit-transform-origin: 0 0;
-moz-transform-origin:    0 0;
-ms-transform-origin:     0 0;
-o-transform-origin:      0 0;

-webkit-transform: rotate(90deg); 
-moz-transform:    rotate(90deg); 
-ms-transform:     rotate(90deg); 
-o-transform:      rotate(90deg); 

这是一个有效的小提琴：

https://jsfiddle.net/20x3ejz3/

您可以使用示例代码来实现所需的结果，但这将为您提供一个起点。