如何使用css创建响应时间轴

Question

我想写一个如下图所示的时间表，但我不知道请指导我。

Answer 1

试试这个：

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

.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #000;
  top: 0;
  bottom: 0;
  margin-left: -3px;
}

.container {
  padding: 0 40px;
  position: relative;
  background-color: inherit;
}

.container::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: -17px;
  background-color: #000;
  border: 5px solid white;
  top: 0;
  border-radius: 50%;
  z-index: 1;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -12px;
}

.content {
  position: relative;
  padding: 3px 0 15px;
}

.content p {
  margin: 0;
}

<div class="timeline">

  <div class="container right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>

  <div class="container right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>

  <div class="container right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto.</p>
    </div>
  </div>
</div>