Is it possible to put divs in this way?

Question

One color on image symbolizes one div. Is it possible to put first div under second, second under third, third under fourth, and fourth under first?

Is it possible to do with pure CSS (without SVG/image etc.)?

Answer 1

You can also play with 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>