可以这样放div吗？

Question

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

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

Answer 1

不 - 这是不可能的（至少通过使用 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>

Answer 2

你也可以玩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>

可以这样放div吗？

Is it possible to put divs in this way?

html

css

z-index