Inhalt über horizontale Zeitleiste

Question

Ich versuche, unten einen horizontalen Zeitleiste wie das Bild zu erstellen ..

aber ich versuche, den besten Weg zu finden, es in ansprechender Art und Weise zu tun. Kann jemand helfen. Ich habe die horizontale Zeitleiste wie folgt erstellt.

body { 
 
    padding-top: 30px; 
 
} 
 

 
.horizontal-timeline { 
 
    position: relative; 
 
    height: 6px; 
 
    background: #29AAE3; 
 
    margin: 0; 
 
} 
 

 
.arrow-up, .arrow-down { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    vertical-align: baseline; 
 
} 
 

 
.arrow-up { 
 
    top: -20px; 
 
    border-bottom: 20px solid #29AAE3; 
 
} 
 

 
.arrow-down { 
 
    bottom: -20px; 
 
    border-top: 20px solid #29AAE3; 
 
}

<div class="horizontal-timeline"> 
 
    <div class="arrow-up" style="left: 20%;"></div> 
 
    <div class="arrow-up" style="left: 60%;"></div> 
 
    <div class="arrow-down" style="left: 40%;"></div> 
 
    <div class="arrow-down" style="left: 80%;"></div> 
 
</div>

Answer 1

Sie könnten nur die Pixelwerte ersetzen Höhe und Breite Ansichtsfenster. Hier ist ein Beispiel, fühlen Sie sich frei, mit den Werten zu spielen und zu sehen, was Ihnen am besten passt.

body { 
 
    padding-top: 30px; 
 
} 
 

 
.horizontal-timeline { 
 
    position: relative; 
 
    height: 1vh; 
 
    background: #29AAE3; 
 
    margin: 0; 
 
} 
 

 
.arrow-up, .arrow-down { 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 2vw solid transparent; 
 
    border-right: 2vw solid transparent; 
 
    vertical-align: baseline; 
 
} 
 

 
.arrow-up { 
 
    top: -2vw; 
 
    border-bottom: 2vw solid #29AAE3; 
 
} 
 

 
.arrow-down { 
 
    bottom: -2vw; 
 
    border-top: 2vw solid #29AAE3; 
 
}

<div class="horizontal-timeline"> 
 
    <div class="arrow-up" style="left: 20%;"></div> 
 
    <div class="arrow-up" style="left: 60%;"></div> 
 
    <div class="arrow-down" style="left: 40%;"></div> 
 
    <div class="arrow-down" style="left: 80%;"></div> 
 
</div>