0

我想做一个类似于彭罗斯楼梯的效果，你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：

我想达到这个 效果

4

1 回答 1

0

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

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

在这种情况下，您可以使用#s2 伪元素复制属性来重新创建同一个框，position: absolute然后将其向左移动，使用定位基本上覆盖两条黑线。

因为第二个元素是在 DOM 中的第一个元素之后解析的，并且它们有点绑在臀部；一组是一个盒子，它的子元素是黑线，我们使用第二个父元素伪元素#s2:after覆盖第一个，因为它自然会位于 z 索引中两个元素的顶部。

--编辑结束--

注意：我还从您的 span 元素中创建了 div，因为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>

于 2022-01-01T23:29:03.033 回答