Creating connectors between <div> boxes - html

Question

I've been trying to create a gray connector between div containers (image below) for a while now. The margin between the containers is set to 2.5vw per container on each side.
I've tried to create it using an .svg background on a :before pseudo element and positioning it, but I couldn't make it work. The gray connector should stay fixed in relation to the boxes until the boxes wrap (mobile version), in which case the connectors should be hidden. The mobile version is easy to setup, but when the elements are next to each other I'm finding it almost impossible to apply the gray connector to the elements. The connector should stay fixed in relation to the containers when transitioning between laptop screens and large desktop screens.
Here's the outcome I want:
Gray connector between boxes.
Here's the outcome I've got and the code I've used:
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;
}
Maybe I've been going at it the wrong way, all workarounds are welcome.

Answer 1

Here is one way to do it:
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>

Answer 2

I figured out the solution! It's to create a pseudo-element, with a height of 100% and a width equal to the margin between the elements. To keep it responsive, it's important to use vw for the width unit, both for the margin between elements and also the width of the decoration itself. The margin of the <div>s are 2.5vw each, so setting the width of the pseudo element to 5 makes it fit perfectly. Heres the code:
.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%);
}