CSS 是網頁設計中必不可少的一部分，它可以實現各種炫酷的效果。在制作時間線的過程中，CSS 可以起到很好的作用。下面，我們就來看看如何用 CSS 制作時間線。

/* 時間軸 */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* 時間軸中的每一個元素 */
.timeline::after {
content: '';
position: absolute;
width: 2px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
/* 時間軸上的時間點 */
.timeline li {
position: relative;
list-style: none;
width: 50%;
padding: 20px 40px;
clear: both;
}
/* 時間軸上的時間點的左半部分 */
.timeline li::before {
content: "";
position: absolute;
top: 27px;
right: -6px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #444444 transparent transparent;
}
/* 時間軸上的時間點的右半部分 */
.timeline li::after {
content: "";
position: absolute;
top: 27px;
left: -12px;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #444444;
z-index: 1;
}
/* 時間軸上的時間點的文字描述 */
.timeline li div {
position: relative;
color: #333333;
background-color: #ffffff;
border: 1px solid #d4d4d4;
padding: 20px;
}
/* 時間軸上的時間點的文字描述的背景色 */
.timeline li div::before {
content: "";
position: absolute;
top: 10px;
right: -17px;
border-style: solid;
border-width: 10px 17px 10px 0;
border-color: transparent #d4d4d4 transparent transparent;
}
/* 時間軸上的第一個時間點 */
.timeline li:nth-child(even) {
float: right;
text-align: left;
}
/* 時間軸上的第一個時間點的文字描述的位置 */
.timeline li:nth-child(even) div {
right: -40px;
}
/* 時間軸上的第一個時間點的文字描述的背景色的位置 */
.timeline li:nth-child(even) div::before {
right: auto;
left: -17px;
border-color: transparent transparent transparent #d4d4d4;
}

上面這段代碼是制作時間軸的關鍵代碼。其中，`timeline` 類是時間軸的整個容器， `timeline::after` 類是時間軸中的虛線，`timeline li` 類是時間軸上的每一個時間點，`timeline li::before` 類是每個時間點左半部分的三角形，`timeline li::after` 類是每個時間點右半部分的實心圓，`timeline li div` 是每個時間點的文字描述，`timeline li div::before` 是文字描述的背景色。通過這些類的設置，我們可以制作出一條美麗而優秀的時間軸。