能否使用纯CSS实现指定形状？后端开发者求助

下面是实现你需要的形状的具体代码，通过CSS伪元素和变换属性构建中间的斜向连接部分，适配两个正方形加特殊连接线的需求：

<div class="shape-wrapper">
  <div class="square square-left"></div>
  <div class="square square-right"></div>
</div>

/* 容器用于定位两个正方形和中间连接部分 */
.shape-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  margin: 50px; /* 可根据需要调整整体位置 */
}

.square {
  width: 80px;
  height: 80px;
  background-color: #2c3e50;
}

.square-left {
  margin-right: 30px; /* 两个正方形的间距 */
}

.square-right {
  margin-left: 30px;
}

/* 中间斜向连接带，用伪元素实现 */
.shape-wrapper::before {
  content: "";
  position: absolute;
  left: 80px; /* 与左边正方形宽度一致 */
  width: 30px; /* 连接带宽度，和正方形间距匹配 */
  height: 80px; /* 与正方形高度一致 */
  background-color: #2c3e50;
  transform: skewX(-45deg); /* 斜切角度，可调整倾斜程度 */
}

如果需要更贴合图片细节的缺口样式，可替换伪元素的CSS为裁剪方案：

.shape-wrapper::before {
  content: "";
  position: absolute;
  left: 80px;
  width: 40px;
  height: 80px;
  background-color: #2c3e50;
  /* 多边形裁剪实现带缺口的斜向连接 */
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
}

你可以根据需求调整正方形的尺寸、颜色，以及连接部分的宽度和倾斜角度。

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