如何用CSS创建带圆形标记的曲线时间轴

我想通过CSS创建一条带有圆形标记和对应关联文字的曲线/流动线条，在本站、谷歌搜索过，甚至询问过ChatGPT，但这个需求似乎要么非常独特，要么已实现的人尚未分享方案。

为直观展示需求，以下是设计截图：

我尝试用border-radius创建线条，但得到的是带圆角的盒子，而非设计中的曲线效果，我的代码如下：

CSS 代码 #

/* Make sure to include the Font Awesome CSS */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
.timeline-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.timeline {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #ccc;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
}

.circle i {
  font-size: 8px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle .text {
  display: none;
}

.circle:nth-of-type(1) {
  left: 25%;
}

.circle:nth-of-type(2) {
  left: 50%;
}

.circle:nth-of-type(3) {
  left: 75%;
}


/* Responsive styles */

@media (min-width: 768px) {
  .circle {
    width: 20px;
    height: 20px;
  }
  .circle i {
    font-size: 16px;
  }
  .circle .text {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    text-align: center;
  }
}

HTML 代码 #

<div class="timeline-container">
  <div class="timeline">
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 1</h3>
        <p>Text 1</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 2</h3>
        <p>Text 2</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 3</h3>
        <p>Text 3</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 4</h3>
        <p>Text 4</p>
      </div>
    </div>
  </div>
</div>

我具备CSS3及现代JavaScript（ES6）基础，但实现这类线条已困扰我3天以上。需求的关键点是：

• 必须响应式
• 线条最好能反向弯曲延伸
• 预留文字空间

内容的提问来源于stack exchange，提问作者Gidi