如何用CSS实现响应式无限火车轨道垂直线条（无需重复DOM元素）

完全可以用纯CSS替代重复的rail_line元素，通过伪元素+重复线性渐变+变换就能实现适配页面宽度的无限倾斜线条效果，无需JS/PHP生成重复DOM。

修改后的完整代码 #

HTML

<div id="rails">
  <div class="lines">
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="rail"></div> <!-- 移除所有rail_line子元素 -->
  <div class="lines">
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

b,
strong {
  font-weight: 700;
}

* {
  box-sizing: border-box;
}

#rails {
  display: flex;
  flex-direction: column;
}

#rails .lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#rails .lines .line {
  background: #000000;
  height: 1px;
  width: 100%;
}

#rails .rail {
  height: 85px;
  overflow: hidden;
  position: relative; /* 为伪元素定位提供基准 */
}

/* 用伪元素生成重复倾斜线条 */
#rails .rail::before {
  content: '';
  position: absolute;
  /* 扩大伪元素范围，避免旋转后线条被裁剪 */
  top: -50%;
  left: 0;
  right: 0;
  bottom: -50%;
  /* 创建水平重复的1px黑线，间隔40px（与原gap一致） */
  background-image: repeating-linear-gradient(to right, 
    transparent, transparent 39px, 
    #000 39px, #000 40px);
  /* 旋转17度，模拟原rail_line的倾斜效果 */
  transform: rotate(17deg);
}

实现原理 #

1. 移除重复DOM：删除所有rail_line元素，仅保留空的.rail容器。
2. 伪元素填充：通过.rail::before创建一个覆盖容器的伪元素，范围比容器大（上下各扩50%），确保旋转后线条不会被裁剪。
3. 重复渐变生成线条：用repeating-linear-gradient创建水平方向重复的1px黑线，间隔40px（与原flex gap一致）。
4. 旋转实现倾斜：对伪元素应用rotate(17deg)，让水平线条变成倾斜状态，完美匹配原效果。
5. 自动适配宽度：伪元素宽度随.rail容器自适应，渐变会自动重复填充整个宽度，无需手动添加线条。

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