CSS：彭罗斯阶梯叠加效果

Question

我想做一个类似于 Penrose stair 的效果，其中 element-1 在 element-2 之上，但在 element-3 之后在element-2 据我所知有点复杂。

<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;
}

该代码有两个元素都带有 before 到达另一个元素，这是我的问题的简化版本，但我想在两个元素后面都有 before。

我还需要考虑一些其他限制，这应该是响应式的，所以我不能轻易摆脱设定的宽度。另外，我尽量保持原汁原味。

编辑 1：

我想实现这个 effect

Answer 1

您可以在两个元素中使每个框元素全宽。一侧 比另一侧高 z-index 并且细线。这会给人一种错觉，即你用一个盒子而不是伪元素来构成整个盒子元素。调整每个组合元素的半径，使其仅位于需要的两个角上。调整每个绝对元素的位置以与其相应的彩色一半对齐。

-- 编辑： OP 要求在两个框元素下方添加两条黑线 --

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.

-- 编辑结束 --

注意：我还从您的 span 元素中创建了 divs，因为 div 是块级元素，不应嵌套在 SPAN 中.

我的例子简陋而肮脏，但它应该说明如何实现这种错觉。

.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>

CSS：彭罗斯阶梯叠加效果

CSS: Penrose stairs stacking effect

css

stacking-context