如何用CSS实现图标间的连接线？已完成布局与图标但遇问题

根据需求，这里提供几种实用的CSS实现图标间连接线的方案，你可以结合自身布局场景选择：

方案一：CSS Grid + 伪元素（适配网格布局图标） #

如果图标采用Grid布局排列，可借助Grid行列线，通过伪元素绘制连接线：

<div class="icon-container">
  <div class="icon">📁</div>
  <div class="icon">📄</div>
  <div class="icon">📊</div>
</div>

.icon-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
}

/* 绘制横向连接线 */
.icon:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  width: 40px;
  height: 2px;
  background-color: #333;
  transform: translateY(-50%);
}

方案二：Flexbox + 线性渐变（适配横/纵向排列图标） #

若图标是Flex横向或纵向排列，用线性渐变可快速实现贯穿式连接线：

<div class="icon-row">
  <div class="icon">🔍</div>
  <div class="icon">⚙️</div>
  <div class="icon">🚀</div>
</div>

.icon-row {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
  /* 背景渐变实现连接线 */
  background: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: calc(40px + 100px) 2px;
  background-position: center left;
  background-repeat: repeat-x;
  padding: 20px 0;
}

.icon {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background-color: #fff;
  /* 覆盖背景渐变，避免图标上出现线条 */
  z-index: 1;
}

方案三：SVG绘制连接线（复杂布局首选） #

如果图标布局不规则，SVG路径绘制能精准控制连接线走向，灵活性更高：

<div class="icon-wrapper">
  <svg class="connection-lines" viewBox="0 0 400 200">
    <!-- 绘制第一个到第二个图标的直线 -->
    <path d="M 60 100 L 160 100" stroke="#333" stroke-width="2" fill="none"/>
    <!-- 绘制第二个到第三个图标的带拐点线条 -->
    <path d="M 210 100 L 260 100 L 260 150 L 310 150" stroke="#333" stroke-width="2" fill="none"/>
  </svg>
  <div class="icon" style="top: 50px; left: 10px;">📁</div>
  <div class="icon" style="top: 50px; left: 160px;">📄</div>
  <div class="icon" style="top: 100px; left: 260px;">📊</div>
</div>

.icon-wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 0 auto;
}

.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.icon {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background-color: #fff;
  z-index: 1;
}

额外提示 #

• 若布局为响应式，记得给连接线添加对应媒体查询，调整长度或路径
• 伪元素方案需注意元素的position属性，确保连接线定位准确
• SVG方案可结合JS动态计算图标位置，实现更灵活的动态连线

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