重叠弹性盒子还是不同的方法？

Question

我正在寻求有关如何处理 this image 中所示布局的建议。

我不确定单独使用 flex 是否可以处理重叠的绿色虚线框（使用转换？），或者块是否应该是 flex 框并且绿色虚线重叠框应该只是相对定位的 div？移动版本相当简单，因为不涉及重叠，但我不确定如何 'slice' 设计，以便 CSS 可以处理这两种情况。

下面是使用 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

使用负边距可以获得重叠效果！这是一个例子：

.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>

重叠弹性盒子还是不同的方法？

Overlapping flex boxes or a different approach?

html

css

layout

margin

flexbox