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

时间:2019-11-12 18:37:25

标签: html css z-index

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

是否可以使用纯CSS(没有SVG /图像等)?

enter image description here

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

没有-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>