CSS垂直時間線是一種比較特殊的布局方式，可以將時間軸以垂直方向排列展示。這種布局方式適用于需展示時間順序的信息，如歷史事件等。下面我們一起來看看如何通過CSS來實現垂直時間線。

.timeline {
position: relative;
padding-left: 30px;
margin-bottom: 50px;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 15px;
width: 2px;
height: 100%;
background-color: #ddd;
}
.timeline >* {
position: relative;
}
.timeline >*:before {
content: "";
position: absolute;
top: 20px;
left: 9px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #ddd;
}
.timeline >*:after {
content: "";
position: absolute;
top: 20px;
left: 18px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.timeline >*:nth-child(even):before {
transform: translate(-50%, 10px);
}
.timeline >*:nth-child(even):after {
left: auto;
right: 18px;
border-left: 10px solid #ddd;
}
.timeline >*:nth-child(odd):before {
transform: translate(-50%, -10px);
}
.timeline >*:nth-child(odd):after {
left: auto;
right: 18px;
border-right: 10px solid #ddd;
}

以上就是CSS垂直時間線的樣式代碼。我們可以看到，通過偽元素:before和:after來創建時間線中的小圓圈和箭頭，并且根據元素的順序來判斷箭頭的方向。通過這些簡單的CSS代碼，我們就可以完成垂直時間線的布局。