CSS: Penrose stairs stacking effect

Question

I want to do an effect similar to a Penrose stair where you have element-1 on top of element-2 but behind element-3 witch is behind of element-2 a bit complicated from what I can tell.

I have this code

<body>
  <div class="parent">
    <div id="s1" class="square"><div></div></div>
    <div id="s2" class="square"><div></div></div>
  </div>
</body>

.parent {
  width: 300px;
  height: 300px;
  border-radius: 25px;
  background: orange;
  position: relative;
}
.square{
  display: inline-block;
  position: absolute;
  z-index: 10;
}
#s1{
  --Color: teal;
  left: calc(100px);
  top: calc(100px);
  transform: rotate(45deg);
}
#s2{
  --Color: cornflowerblue;
  right: calc(100px);
  bottom: calc(100px);
  transform: rotate(-135deg);
}
.square>div{
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--Color);
  opacity: 1;
}
.square>div:before{
  content: " ";
  display: inline-block;
  position: relative;
  width: 100px;
  height: 8px;
  background: var(--Color);
  background: #000;
  z-index: -1;
  top: 5px;
  left: 5px;
}

The code has two elements both with a before reaching the other element, this is a simplified version of my problem, but I want to have the before behind both elements.

There are some other restrictions I need to consider, this should be responsive so I can't get away with a set width so easely. Also, I'm trying to keep it as vanilla as possible.

Edit 1:

I'm want to acheave this effect

Having divs (normally block level elements) inside spans is a bit strange. Is it necessary? Also you won’t get el1 in front of el2 which is in front of el3 which is in front of el1 structurally using html/css so can you provide a drawing of what it should look like. — A Haworth, Jan 01 '22 at 21:51
The spans are not necessary, I just wanted a way to wrap the divs and did not think much about it, I also added a picture to the description, thanks: D — Fermin, Jan 03 '22 at 03:22

dale landry · Accepted Answer · 2022-01-03T05:29:09.493

You can make each box elements full width in two elements. One side having a higher z-index than the other side and the thin lines. This will give the illusion that you hove one box instead of pseudo elements to make up the entirety of your box element. Adjust the radius of each combining element so it is only on the two corners it needs to be. Adjust the positioning of each absolute element to line up with its corresponding colored half.

-- EDIT: OP asked to have the two black lines below the two box elements --

In this case you can use the #s2 pseudo element copying the properties to recreate the same box, make it position: absolute then move it left using positioning essentially covering up the two black lines.

Because the second element is parsed after the first in the DOM and they are sort of tied at the hip; one set being a box and its child element the black line, we use the second parent elements pseudo element #s2:after to cover the first as it will naturally sit on top of both elements in z-indices.

-- end of edit --

NOTE: I also created divs out of your span elements as a div is a block level element and should not be nested inside SPAN.

My example is just down and dirty but it should illustrate how this illusion can be achieved.

.parent {
  width: 300px;
  height: 300px;
  border-radius: 25px;
  background: orange;
  position: relative;
}
.square{
  display: inline-block;
  position: absolute;
  z-index: 10;
}
#s1{
  --Color: teal;
  left: calc(100px);
  top: calc(100px);
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
}
#s2{
  --Color: cornflowerblue;
  right: calc(100px);
  bottom: calc(100px);
  transform: rotate(-135deg);
}
#s2:after{
  content: "";
  position: absolute;
  background-color: teal;
  border-radius: 10px;
  top: 0;
  left: 70px;
  width: 100%;
  height: 100%;
}
.square>div{
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--Color);
  opacity: 1;
}
.square>div:before{
  content: " ";
  display: inline-block;
  position: relative;
  width: 100px;
  height: 8px;
  background: #000;
  z-index: -1;
  top: 5px;
  left: 5px;
}

<body>
  <div class="parent">
    <div id="s1" class="square"><div></div></div>
    <div id="s2" class="square"><div></div></div>
  </div>
</body>

Thanks Dale, but I actually wanted the opposite, where you have both black bars behind the squares, I've updated the post to and now has a image of the result I want,, also I corrected the span/div situation — Fermin, Jan 03 '22 at 03:27
@Fermin I see, in this case just create a pseudo element for your s2 element and make it position: absolute and move it left. Use this element to cover the s1 element as it naturally sits on top of the s1 element in the z-indices. I have edited the answer. — dale landry, Jan 03 '22 at 05:30

CSS: Penrose stairs stacking effect

1 Answers1