css如何在两点之间制作带有点的垂直时间线

Question

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

任何示例代码。

问候。

Answer 1

使用 background-image:radial-gradient 创建点并使用 "pseudo-element" 添加点和图标。

* {
  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>