如何为.outter容器添加贴合内部元素轮廓的边框/阴影？

问题描述 #

我有一个名为.outter的div容器，其中可包含任意数量的.inner-wrapper div，每个.inner-wrapper又包含任意数量的.element div。层级间的.element数量相同或更少，形成底部类似金字塔的结构。
我希望为.outter容器添加边框和/或box-shadow，使其直接贴合.inner-wrapper组成的整体轮廓，且红蓝.element接触处不能出现边框。想了解是否无需复杂JS计算即可实现该效果。

补充：红蓝元素宽度可能相同（即.element数量一致），但下层.inner-wrapper的.element数量永远不会多于上层。

代码示例：

.outter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  border-top: unset;
  overflow: hidden;
  width: auto;
}

.inner-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.element {
  width: 100px;
  height: 100px;
  background: blue;
}

.element.red {
  background: red;
}

<div class="outter">
  <div class="inner-wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="inner-wrapper">
    <div class="element red"></div>
    <div class="element red"></div>
  </div>
</div>

预期效果：黑色线条为贴合整体结构的边框（类似梯形轮廓，覆盖最上层元素的左右两端、最下层元素的左右两端，以及顶部和底部）

纯CSS解决方案（无需JS） #

可以通过CSS变量 + 伪元素 + clip-path实现贴合金字塔轮廓的边框，同时保证红蓝元素接触处无内部边框。核心思路是用伪元素绘制左右斜边框，配合容器的上下边框，组成完整的外围轮廓。

修改后的代码：

/* 定义可配置的CSS变量，根据实际场景调整 */
:root {
  --element-size: 100px; /* 元素的宽高 */
  --top-layer-count: 4; /* 最上层的元素数量 */
  --bottom-layer-count: 2; /* 最下层的元素数量 */
  --border-width: 2px; /* 边框宽度 */
  --border-color: black; /* 边框颜色 */
}

.outter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: auto;
  position: relative;
  /* 顶部和底部的水平边框 */
  border-top: var(--border-width) solid var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
}

.inner-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.element {
  width: var(--element-size);
  height: var(--element-size);
  background: blue;
}

.element.red {
  background: red;
}

/* 绘制左侧斜边框 */
.outter::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  width: var(--border-width);
  height: calc(100% + var(--border-width) * 2);
  background: var(--border-color);
  /* 计算左右偏移量：(最上层宽度 - 最下层宽度)/2 */
  --offset: calc((var(--top-layer-count) - var(--bottom-layer-count)) * var(--element-size) / 2);
  clip-path: polygon(0 0, 0 100%, var(--offset) 100%);
}

/* 绘制右侧斜边框 */
.outter::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--border-width));
  right: calc(-1 * var(--border-width));
  width: var(--border-width);
  height: calc(100% + var(--border-width) * 2);
  background: var(--border-color);
  --offset: calc((var(--top-layer-count) - var(--bottom-layer-count)) * var(--element-size) / 2);
  clip-path: polygon(0 0, 0 100%, calc(-1 * var(--offset)) 100%);
}

关键说明：

1. 灵活配置：只需修改:root中的变量值，就能适配不同的元素大小、层级数量和边框样式，无需改动核心逻辑。
2. 边框逻辑：
   • 容器的border-top和border-bottom负责顶部、底部的水平边框。
   • 两个伪元素通过clip-path裁剪出斜向边框，自动连接最上层和最下层的左右端点，完美贴合金字塔轮廓。
3. 无内部边框：所有边框都位于.outter的外围，内部红蓝元素之间不会出现多余边框，完全满足需求。

适配特殊场景：

• 如果是多层级结构（比如4→3→2），只需将--bottom-layer-count设为最底层的元素数量即可，斜边框会自动连接最上层与最下层的端点。
• 如果所有层级元素数量相同（矩形结构），将--top-layer-count和--bottom-layer-count设为相同值，伪元素会自动变为垂直边框，最终呈现标准矩形边框。

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