Html 水平时间线上的内容

我正在尝试创建一个水平时间线，如下图所示

然而，我正试图找到最好的方法，以响应的方式做这件事。有人能帮忙吗。我已经创建了水平时间线，如下所示。

正文{
填充顶部：30px；
}
.水平时间线{
位置：相对位置；
高度：6px；
背景：#29AAE3；
保证金：0；
}
.向上箭头，.向下箭头{
位置：绝对位置；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
垂直对齐：基线；
}
.向上箭头{
顶部：-20px；
边框底部：20px实心#29AAE3；
}
.向下箭头{
底部：-20px；
边框顶部：20px实心#29AAE3；
}

---

您可以将像素值替换为视口高度和宽度。 这里有一个例子，请随意玩弄这些价值观，看看什么最适合你

正文{
填充顶部：30px；
}
.水平时间线{
位置：相对位置；
高度：1vh；
背景：#29AAE3；
保证金：0；
}
.向上箭头，.向下箭头{
位置：绝对位置；
宽度：0；
身高：0；
左边框：2vw实心透明；
右边框：2vw实心透明；
垂直对齐：基线；
}
.向上箭头{
顶部：-2vw；
边框底部：2vw实心#29AAE3；
}
.向下箭头{
底部：-2vw；
边框顶部：2vw实心#29AAE3；
}

---

我要求在水平时间线上添加内容和图像。。我的水平时间表运行良好。