CSS如何使用两点之间的点制作垂直时间线

Question

我想知道如何制作垂直时间轴，并在两点之间画点，如图所示。

任何示例代码。

致谢。

Answer 1

使用背景图像：径向渐变创建渐变，并使用“伪元素” 添加渐变和图标。

* {
  box-sizing: border-box;
}

.items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.items li {
  position: relative;
  padding: 0 10px 20px 40px;
}

.items li:after {
  content: "";
  position: absolute;
  background: #02a4ce;
  width: 16px;
  height: 16px;
  left: 6px;
  top: 2px;
  border-radius: 50%;
}

.items li:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20px;
  left: 8px;
  top: 0;
  background-image: radial-gradient(circle at 2.5px, #ccc 1.25px, rgba(255, 255, 255, 0) 2.5px);
  background-position: top, right, bottom, left;
  background-size: 15px 15px;
  background-repeat: repeat-y;
}

.items .end:before {
  display: none;
}

.items .end:after {
  background: #ec6352;
}

<ul class="items">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  </li>
  <li>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  </li>
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </li>
  <li class="end">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </li>
</ul>