是否可以通过这种方式放置div？

Question

图像上的一种颜色代表一个格。是否可以将第一个div放在第二个，第二个放在第三个，第三个放在第四个和第四个放在第一个的下面？

是否可以使用纯CSS（没有SVG /图像等）？

Answer 1

您还可以使用transform：rotate

div {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: grid;
  grid-template-columns: 300px 300px;
  grid-template-rows: 200px 200px;
}

div p {
  margin: 2em;
}

div :nth-child(1),
div :nth-child(2) {
  background: lightblue;
  margin: 0 3em;
  grid-column: 2;
  grid-row: 1 / span 2;
}

div :nth-child(1) {
  background: black;
  grid-column: 1;
    color: white;
}

div :nth-child(3),
div :nth-child(4) {
 
  background: yellow;
  margin: 2em 1em;
  grid-column: 1 / span 2;
  grid-row: 1;
}

div :nth-child(4) {
  background: lightgreen;
  grid-row: 2;
}

div :nth-child(1) {
  transform: rotateX(1deg)
}

div :nth-child(2) {
  transform: rotateX(-1deg)
}

<div>
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
</div>

Answer 2

没有-tis是不可能的（至少通过使用z-index层）-但是您可以使用一些技巧来获得这种效果，例如使用5 div-s：

.boxA {
   position: absolute;
   width: 97px;
   height: 175px;
   background: black;
   left: 17px;
   z-index: 2;
}

.boxB {
   position: absolute;
   width: 248px;
   height: 60px;
   background: yellow;
   top: 32px;
   z-index: 3;
}

.boxC {
   position: absolute;
   width: 248px;
   height: 60px;
   background: #00ff7b;
   top: 112px;
   z-index: 1;
}

.boxD {
   position: absolute;
   width: 62px;
   height: 175px;
   background: cyan;
   left: 157px;
   z-index: 0;
}

.boxE {
   position: absolute;
   width: 62px;
   height: 100px;
   background: cyan;
   left: 157px;
   z-index: 4;
}

<div class="boxA"></div>
<div class="boxB"></div>
<div class="boxC"></div>
<div class="boxD"></div>
<div class="boxE"></div>