Benutzerdefinierte CSS-Linien verbinden mehrere divs/Fortschrittsbalken

Question

Ich möchte gerundete Linien erstellen, die 3 divs zusammen wie das Bild unten verbinden. Ich habe versucht, mit css Border Radius, aber nicht sicher, wie sie wie das Bild unten verbunden aussehen.

<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

können Sie versuchen, Pseudo-Element wie folgt aus:

.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

können Sie verwenden:

/* 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); 

hier ein Arbeits Fiddle ist:

https://jsfiddle.net/20x3ejz3/

Sie können mit dem Beispielcode spielen, um das gewünschte zu erreichen Ergebnis, aber das wird Ihnen einen Start poi geben nt.