CSS中的橫向不規則時間軸是一種很炫酷的效果，可以用于展示歷史事件或者時間進度等。我們可以通過CSS的偽元素和transform來實現這個效果。

.timeline {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -3px;
width: 6px;
height: 100%;
background-color: #ced4da;
}
.timeline li {
position: relative;
width: 50%;
padding: 20px;
margin-bottom: 50px;
}
.timeline li .timeline-panel {
position: relative;
width: 100%;
padding: 0 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.timeline li:before,
.timeline li:after {
content: "";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li .timeline-panel:before {
content: "";
position: absolute;
top: 26px;
left: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-right: 15px solid #ccc;
border-left: 0 solid transparent;
border-bottom: 15px solid transparent;
}
.timeline li .timeline-panel:after {
content: "";
position: absolute;
top: 27px;
left: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-right: 14px solid #fff;
border-left: 0 solid transparent;
border-bottom: 14px solid transparent;
}
.timeline li .timeline-icon {
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
text-align: center;
border: 3px solid #fff;
border-radius: 50%;
color: #fff;
background-color: #999;
z-index: 100;
}
.timeline li .timeline-icon i {
font-size: 24px;
line-height: 50px;
}
.timeline li .timeline-marker {
position: absolute;
top: 36px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #999;
z-index: 99;
}

以上代碼實現了時間軸的基本樣式。其中，timeline代表整個時間軸的樣式，timeline:before實現中間的分割線，timeline li是每一條事件的樣式，timeline li:before和timeline li:after用于清除浮動，.timeline li .timeline-icon和.timeline li .timeline-marker分別代表時間軸上方的圖標和下方的標志。

通過這個基本樣式，我們可以根據需求，進一步調整時間軸上的事件，并展示更加炫酷的效果。