如何实现CSS立方体覆盖效果中绿色矩形的中间连接？

以下是实现两个绿色矩形中间相互连接效果的具体方案：

核心思路 #

在两个绿色矩形的对角线交叉位置添加一个旋转的绿色连接块，通过绝对定位和层级控制，让连接块仅在绿色矩形之间的区域显示，达成视觉上的连接效果。

修改后的完整代码 #

CSS 代码 #

:root{
    --black: rgb(11, 14, 17);
    --green: rgb(112, 228, 80);
    --gray: rgb(55, 55, 55);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    background-color: var(--black);
    color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rect-bar{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: visible;
}

#rect-bar .rect-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

#rect-bar .rect-row .rect-cube{
    margin: 5px;
    width: 150px;
    height: 150px;
    border-radius: 15px;
    background-color: var(--green);
}

#rect-bar .rect-row .rect-cube.rcg{
    width: 120px;
    height: 120px;
    background-color: var(--gray);
}

/* 连接块样式 */
#rect-bar .connector{
    position: absolute;
    width: calc(150px + 10px);
    height: calc(150px + 10px);
    background-color: var(--green);
    transform: rotate(45deg);
    top: 50%;
    left: 50%;
    margin-top: calc(-(150px + 10px)/2);
    margin-left: calc(-(150px + 10px)/2);
    z-index: -1;
}

HTML 代码 #

<div id="rect-bar">
  <div class="connector"></div>
  <div class="rect-row">
    <div class="rect-cube rcg"></div>
    <div class="rect-cube"></div>
  </div>
  <div class="rect-row">
    <div class="rect-cube"></div>
    <div class="rect-cube rcg"></div>
  </div>
</div>

方案说明 #

1. 给父容器#rect-bar设置相对定位，作为连接块的定位基准。
2. 连接块是旋转45°的绿色方块，尺寸与绿色矩形加左右边距的总宽度一致，通过绝对定位居中到两行的交叉点。
3. 设置连接块z-index: -1，让它位于所有方块下方，灰色矩形会自动覆盖连接块的多余部分，仅保留绿色矩形之间的连接区域，完美匹配目标效果。

内容的提问来源于stack exchange，提问作者Weilory