Custom CSS lines connecting multiple divs/progress bars - css

Question

I want to create rounded lines that connect 3 divs together like the image below. I tried using css border radius but not sure how to make them look connected like image below.
<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

You may try pseudo element like this :
.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

You can use:
/* 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);
Here is a working Fiddle:
https://jsfiddle.net/20x3ejz3/
You can play around with the sample code to achieve the desired result but this will give you a starting point.