html+css实现一个S型历程发展时间轴线

以下是一个简单的HTML和CSS代码，可以实现一个S型历程发展时间轴线：

HTML代码：

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-icon">
      <i class="fa fa-globe"></i>
    </div>
    <div class="timeline-content">
      <h3>2000年</h3>
      <p>事件1的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <i class="fa fa-user"></i>
    </div>
    <div class="timeline-content">
      <h3>2005年</h3>
      <p>事件2的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <i class="fa fa-camera"></i>
    </div>
    <div class="timeline-content">
      <h3>2010年</h3>
      <p>事件3的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <i class="fa fa-book"></i>
    </div>
    <div class="timeline-content">
      <h3>2015年</h3>
      <p>事件4的描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <i class="fa fa-briefcase"></i>
    </div>
    <div class="timeline-content">
      <h3>2020年</h3>
      <p>事件5的描述</p>
    </div>
  </div>
</div>

CSS代码：

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: #ccc;
  z-index: -1;
}

.timeline-item {
  position: relative;
  padding: 50px 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid #ccc;
  z-index: 1;
}

.timeline-item:nth-child(odd) .timeline-content {
  text-align: right;
}

.timeline-item:nth-child(odd) .timeline-content::before {
  right: -15px;
  border-width: 8px 0 8px 15px;
  border-color: transparent transparent transparent #ccc;
  left: auto;
}

.timeline-item:nth-child(even) .timeline-content {
  text-align: left;
}

.timeline-item:nth-child(even) .timeline-content::before {
  left: -15px;
  border-width: 8px 15px 8px 0;
  border-color: transparent #ccc transparent transparent;
  right: auto;
}

.timeline-content {
  position: relative;
  margin-left: 50px;
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 8px 0;
  border-color: transparent #ccc transparent transparent;
  left: -15px;
}

你可以根据实际需要，修改CSS样式，例如颜色、图标等，来实现你自己的S型历程发展时间轴线。