实现效果
布局思路
知识点
中间横线: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>
<div
style="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%;
}