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

Question

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

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

Answer 1

不，这是不可能的-但是您可以使用一些技巧来获得这种效果，例如，使用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>