如何在网站的圆形元素间添加指向右侧的带箭头连线？

我需要在网站的圆形元素之间创建带箭头的连线，箭头指向右侧的圆形。目前已经完成了圆形内部及外部的文字设置，但现有实现的箭头连线效果不理想，而且不具备响应式特性，以下是我当前的代码：

原CSS代码 #

.circle{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    text-align: center;
}
.arrow-line{
    width: 300px;
    height: 1px; 
    border: 1px #0070BA solid;
    margin-top: 55px;
}
.arrow {
    width: 10px;
    border: solid #0070BA ;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    margin-top: 50px;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.circletext{
    display: flex;
    padding-top: 10px;
    margin-top: 10px;
    align-items: center;
    flex-direction: column;
    font-size: 25px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.03em;
    text-align: left;
    color: #595555;
}
.circle-1 {
    background-color:#fff;
    border:2px solid #0070BA;    
    height:69px;
    width: 65px;;
    border-radius:50%;
    color: #0070BA;
    text-align: center;
    font-size: 25px;
    line-height: 60px;
}

原HTML代码 #

<div class="circle">
  <div class="circletext">
    <div class="circle-1">1</div>Planning
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">2</div>Recruit
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">3</div>Training and <br>Collaboration
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">4</div>Support
  </div>
</div>

改进后的实现方案 #

下面是重构后的代码，解决了箭头连线的布局问题，同时实现了响应式适配：

CSS代码

/* 主容器：flex布局实现居中，自动换行适配小屏幕 */
.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

/* 步骤项：封装圆形和文字，统一垂直布局 */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
}

/* 圆形样式：保持原有视觉效果，改用flex居中文字 */
.circle-1 {
    background-color: #fff;
    border: 2px solid #0070BA;
    height: 69px;
    width: 65px;
    border-radius: 50%;
    color: #0070BA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin-bottom: 0.5rem;
}

/* 步骤文字：限制宽度避免换行混乱，保持原有字体样式 */
.step-text {
    font-size: 25px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.03em;
    color: #595555;
    max-width: 120px;
}

/* 连线组件：整合线条和箭头，确保垂直居中 */
.arrow-connector {
    display: flex;
    align-items: center;
    margin: 0 0.5rem;
}

/* 连线：自适应宽度，设置最小宽度保证小屏幕显示 */
.arrow-line {
    height: 2px;
    background-color: #0070BA;
    flex: 1;
    min-width: 40px;
}

/* 箭头：用CSS边框绘制标准箭头，替代旋转方式 */
.arrow-right {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #0070BA;
    margin-left: 0.25rem;
}

HTML代码

<div class="circle-container">
    <div class="step-item">
        <div class="circle-1">1</div>
        <div class="step-text">Planning</div>
    </div>
    <div class="arrow-connector">
        <div class="arrow-line"></div>
        <div class="arrow-right"></div>
    </div>
    <div class="step-item">
        <div class="circle-1">2</div>
        <div class="step-text">Recruit</div>
    </div>
    <div class="arrow-connector">
        <div class="arrow-line"></div>
        <div class="arrow-right"></div>
    </div>
    <div class="step-item">
        <div class="circle-1">3</div>
        <div class="step-text">Training and Collaboration</div>
    </div>
    <div class="arrow-connector">
        <div class="arrow-line"></div>
        <div class="arrow-right"></div>
    </div>
    <div class="step-item">
        <div class="circle-1">4</div>
        <div class="step-text">Support</div>
    </div>
</div>

关键改进说明 #

• 响应式适配：主容器添加flex-wrap: wrap，屏幕宽度不足时自动换行；连线使用flex:1自适应剩余空间，搭配min-width保证小屏幕下的基础显示效果。
• 布局优化：将每个步骤封装为独立的step-item，连线和箭头整合为arrow-connector，结构更清晰，flex布局确保所有元素垂直居中对齐。
• 箭头优化：用CSS边框绘制标准箭头，替代原有的旋转边框方式，视觉效果更统一，无需额外DOM元素。
• 间距控制：使用gap和margin统一管理元素间距，避免手动计算margin导致的布局混乱。

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