如何将 2 个背景颜色与 2 个不同的 div 合并？

Answer 1

您可以使用 transform 属性移动两个父容器，其中包含两个子容器。

*{
  margin: 0;
  paddding: 0;
}

.bg{
  width: 100vw;
  height: 100vh;
  background-color: #303030;
  display: flex;
  align-items:center;
  justify-content:center;
  color: white;
}

.parent-1{
  display:flex;
  transform: translate(45px, -5px); 
}
.parent-2{
  display:flex;
  transform: translate(-45px, 5px);
}

.square-1{
  background-color: blue;
  width: 100px;
  height: 50px;
}

.square-2{
  background-color: blue;
  width: 100px;
  height: 25px;
  position:relative;
  top:0;
}
.square-3{
  background-color: red;
  width: 100px;
  height: 25px;
  position:relative;
  top: 25px ;
}

.square-4{
  background-color: red;
  width: 100px;
  height: 50px;
}

<div class='bg'>
  <div class='parent-1'> 
    <div class='square-1'>
       square 1
  </div>
  <div class='square-2'>
       square 2
  </div>
  </div>
    <div class='parent-2'>
      <div class='square-3'>
         square 3
      </div>
      <div class='square-4'>
         square 4
      </div>
    </div>

</div>