css左右交替时间轴

CSS 左右交替时间轴是一种非常流行的设计风格，可以将时间轴放在页面的左侧或右侧，为用户带来更好的视觉效果。下面我们来看一下如何使用 CSS 实现这种效果。

.timeline {
    position: relative;
    padding: 0;
    margin: 0;
}

.timeline li {
    list-style: none;
    position: relative;
    padding: 50px 0;
}

.timeline li:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50px 50px;
    border-color: transparent transparent #007bff transparent;
    transform: translateX(-50%);
}

.timeline li:first-child {
    padding-top: 0;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline .left {
    padding-left: 80px;
}

.timeline .left:after {
    left: auto;
    right: 50%;
    border-width: 50px 50px 0 0;
    border-color: #007bff transparent transparent transparent;
    transform: translateX(50%);
}

.timeline .right {
    padding-right: 80px;
}

.timeline .right:after {
    border-width: 50px 0 0 50px;
    border-color: transparent transparent transparent #007bff;
    transform: translateX(-50%);
}

.timeline .content {
    position: relative;
}

.timeline .content h2 {
    margin-top: 0;
    color: #007bff;
}

.timeline .content p {
    margin: 0;
    color: #333;
}

以上代码定义了一个时间轴的基本样式，其中左侧样式为 .left，右侧样式为 .right，内容样式为 .content。可以根据实际需求修改样式。