实现效果

布局思路

知识点

中间横线：position垂直居中

圆：定位居中，添加背景色，boder

上下错位文字：奇偶选择器控制定位位置

左右另外添加一个盒子

箭头：css绘制三角形然后居中

width: 0; height:0; border:10px solid transparent; border-left-color: #1890FF; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);

实现代码

html

<div style="width:100%;"><div class="timeaxis"><div class="box1 li"><div class="line"></div></div><div class="boxs li" v-for="item in list" :key="item.index"><div class="line"></div><div class="circular">{{ item.year }}</div><div class="desc">{{ item.condation }}</div></div><div class="box1 li"><div class="line"></div><divstyle="width: 0;height:0;border:10px solid transparent;border-left-color: #1890FF;position: absolute;right: -10px;top: 50%;transform: translateY(-50%);"></div></div></div></div>

css

.timeaxis {overflow: hidden;width: max-content;position: relative;height: 150px;left: 50%;transform: translateX(-50%);
}.box1 {width: 60px;float: left;height: 150px;position: relative;
}.boxs {overflow: hidden;float: left;position: relative;width: 180px;height: 150px;
}.line {border-bottom: 1px solid #409eff;position: absolute;width: 100%;top: 50%;transform: translateY(-50%);left: 0;
}.circular {font-size: 14px;line-height: 50px;text-align: center;z-index: 10;border: 2px solid #1890FF;width: 50px;height: 50px;border-radius: 50px;background: white;margin: auto;position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;
}.boxs:nth-child(odd) .desc {text-align: center;position: absolute;top: 0;width: 100%;
}.boxs:nth-child(even) .desc {text-align: center;position: absolute;bottom: 0;width: 100%;
}