在 <div> 框之间创建连接器答案

【问题标题】：Creating connectors between <div> boxes在 <div> 框之间创建连接器
【发布时间】：2020-05-20 08:10:05
【问题描述】：

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

我尝试在 :before 伪元素上使用 .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;
  }

也许我一直走错路，欢迎所有解决方法。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身中最好在Stack Snippet 中重现它所必需的最短代码。见How to create a Minimal, Reproducible Example
不确定是否可以使用 css...也许更容易查看一些花哨的 2d JavaScript 库...

标签： html css css-selectors frontend web-frontend

【解决方案1】：

这是一种方法：

main {
  width: 100%;
  height: 100%;
  position: relative;
}

section {
  display: inline-block;
  width: 100px;
  height: 200px;
  background: orange;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
section + section {
  margin-left: 46px;
}

.connector {
  position: absolute;
  top: 0;
  z-index: -1;
  background: #444;
  width: 100px;
  height: 200px;
  transform-origin: top left;
  transform: skewX(36.87deg); /* do some trigonometry here to get the deg */
}
.connector:nth-of-type(2) {
  left: 150px;
}

<main>
  <section></section>
  <section></section>
  <section></section>
  <div class="connector"></div>
  <div class="connector"></div>
</main>

【讨论】：

【解决方案2】：

我找到了解决方案！它是创建一个伪元素，高度为 100%，宽度等于元素之间的边距。为了保持响应，使用vw 作为宽度单位很重要，既用于元素之间的边距，也用于装饰本身的宽度。 <div>s 的边距为 2.5vw，因此将伪元素的宽度设置为 5 使其完美契合。代码如下：

.container:after{
content: '';
z-index:-1;
position: absolute;
top: 0;
right: -5vw;
width: 5vw;
height: 100%;
background-color: #444;
clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 60%);
}

【讨论】：