如何用CSS给五边形顶部添加边框？及实现房屋屋顶层叠效果

一、修复屋顶层叠效果 #

你的代码核心问题是.inner作为.outer的子元素，其z-index仅在父元素的层叠上下文中生效——.outer设置了z-index: -500，会导致整个父容器（包括子元素）处于底层。要实现粉色屋顶层叠在绿色底座上方，需让两个元素同级，并调整定位逻辑：

修正后的代码 #

<div class="house-wrapper">
  <div class="outer"></div>
  <div class="inner"></div>
</div>

.house-wrapper {
  position: relative;
  left: 50px;
  top: 50px;
}

.outer {
  max-width: 700px;
  height: 800px;
  background-color: #87935B;
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0% 100%);
  position: absolute;
  z-index: 1; /* 底座层级低于屋顶 */
}

.inner {
  max-width: 700px;
  height: 800px;
  background-color: #ffdbbb;
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0% 100%);
  position: absolute;
  z-index: 2; /* 屋顶层级更高 */
  /* 可选：微调位置模拟屋顶突出效果 */
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
}

二、给五边形顶部添加边框 #

clip-path会直接裁剪元素边框，无法通过border属性直接实现。推荐两种实用方案：

方案1：嵌套元素模拟边框 #

外层元素作为边框载体，内层作为填充内容，通过clip-path保持五边形形状：

<div class="inner">
  <div class="inner-fill"></div>
</div>

.inner {
  max-width: 700px;
  height: 800px;
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0% 100%);
  position: absolute;
  z-index: 2;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  background-color: #333; /* 边框颜色 */
  padding: 3px; /* 边框厚度 */
}

.inner-fill {
  width: 100%;
  height: 100%;
  background-color: #ffdbbb; /* 屋顶填充色 */
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0% 100%);
}

方案2：线性渐变绘制边框 #

用渐变直接在顶部生成边框区域，无需额外元素：

.inner {
  max-width: 700px;
  height: 800px;
  position: absolute;
  z-index: 2;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  background: linear-gradient(to bottom, #333 3px, #ffdbbb 3px);
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0% 100%);
}

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