Overlapping flex boxes or a different approach? - html

Question

I'm looking for advice on how to approach the layout as shown in this image.
I'm not sure if flex alone can handle the overlapping green dotted boxes (using a transform?) or if the blocks should be flex boxes and the green dotted overlapping boxes should just be relatively positioned divs? The mobile version is fairly straight-forward as there's no overlapping involved but I'm unsure how to 'slice' the design up so the CSS can handle both situations.
Below is an initial attempt using transform: scale.
.flex-box-row {
display: flex;
justify-content: space-between;
}
.flex-box-row-box {
border: 1px dashed red;
width: 30%;
text-align: center;
min-height: 200px;
}
.flex-box-dots {
max-height: 50px;
border: 1px dashed green;
transform: scale(1.5, 1);
}
.flex-box-dots::after {
content: "..................";
letter-spacing: 4px;
font-size: 18px;
color: black;
margin-left: 10px;
}
<div class="flex-box-row">
<div class="flex-box-row-box">
BLOCK 1
</div>
<div class="flex-box-dots"></div>
<div class="flex-box-row-box">
BLOCK 2
</div>
<div class="flex-box-dots"></div>
<div class="flex-box-row-box">
BLOCK 3
</div>
</div>

Answer 1

You can get the overlapping effect by using negative margin! Here's an example:
.container {
display: flex;
}
.red {
width: 100px;
height: 100px;
border: 2px dotted red;
}
.green {
width: 150px;
height: 20px;
border: 2px dotted green;
margin: 0 -30px;
background-color: white;
z-index: 1;
}
#media (max-width: 500px) {
.container {
flex-direction: column;
align-items: center;
}
.green {
width: 20px;
height: 150px;
margin: 0;
}
}
<div class="container">
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</div>