在[]之间创建连接器> 框 一段时间以来，我一直在尝试在div容器之间创建灰色连接器（下图）。每个容器两侧的容器之间的边距设置为2.5vw。 我试图在伪元素前使用.svg背景创建它，并放置它，但是我无法使其工作。灰色的连接器应相对于盒子保持固定，直到盒子包装好（移动版）为止，在这种情况下，应隐藏连接器。移动版本易于设置，但是当元素彼此相邻时，我发现几乎不可能将灰色连接器应用于元素。在笔记本电脑屏幕和大型台式机屏幕之间转换时，连接器应相对于容器保持固定。 这是我想要的结果： Gray connector between boxes. 这是我得到的结果以及我使用的代码： Outcome I've got. .box-container:after{ content: ''; height: 700px; width: 600px; position: absolute; background-image: url("folder_path/Connector-1.svg"); background-repeat: no-repeat; background-position: -80px 60px; background-overflow: visible !important; z-index: 0 !important; } .box-container{ z-index: 1 !important; } 也许我一直走错路了，欢迎所有解决方法。 一段时间以来，我一直在尝试在div容器之间创建灰色连接器（下图）。每个容器两侧的容器之间的边距设置为2.5vw。我尝试创建...

Question

一段时间以来，我一直在尝试在div容器之间创建灰色连接器（下图）。每个容器两侧的容器之间的边距设置为2.5vw。

Answer 1

这里是一种方法：

Answer 2

我想出了解决方案！这是要创建一个伪元素，其高度为100％，宽度等于元素之间的边距。为了保持响应速度，将vw用于宽度单位非常重要，不仅用于元素之间的边距，还用于装饰本身的宽度。每个<div>的边距均为2.5vw，因此将伪元素的宽度设置为5使其完美匹配。这是代码：