如何用SASS实现页面头部底部中点向下的背景五边形（不修改HTML）

Got it! 既然没法改动HTML代码，咱们就通过SASS利用伪元素来实现这个底部居中的线框五边形，完全不会影响页面里的文本内容。下面是具体的实现步骤和代码：

示例HTML（无需修改） #

假设你的页面头部结构是这样的（不管原有结构，只要给头部加个类名就行）：

<header class="page-header">
  <h1>这是页面标题</h1>
  <p>这里是副标题或者其他文本内容</p>
</header>

SASS实现代码 #

.page-header {
  position: relative;
  padding: 2.5rem 1.5rem; /* 根据你的页面调整内边距 */
  z-index: 1; /* 确保文本在五边形上方 */

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 调整下面的尺寸来改变五边形大小 */
    width: 120px;
    height: 90px;
    /* 线框样式：颜色、粗细可自定义 */
    border: 2px solid #2c3e50;
    border-width: 0 2px 2px 2px; /* 只保留底部和左右边框 */
    background: transparent;
    /* 核心：定义底部中点的五边形路径 */
    clip-path: polygon(50% 100%, 100% 50%, 80% 0, 20% 0, 0 50%);
    z-index: -1; /* 把五边形放在文本下方 */
  }
}

代码说明 #

• 相对定位与层级控制：给头部设置position: relative，让伪元素能基于它定位；通过z-index确保文本始终在五边形上方，不会被遮挡。
• 底部居中的关键：伪元素设置left: 50%加上transform: translateX(-50%)，让它水平居中，再配合bottom: 0，保证五边形的中点正好在头部底部的中心位置。
• 线框五边形实现：
  • 用border设置线框样式，只保留底部和左右边框（顶部不需要，因为五边形顶部是两个斜角）。
  • clip-path: polygon(...)是核心，第一个点50% 100%就是底部中点，剩下的四个点分别定义了五边形的右上、上右、上左、左上顶点，调整这些百分比就能改变五边形的形状比例。
• 自定义调整：你可以修改width/height改变五边形大小，调整border-color/border-width改变线框样式，修改clip-path里的百分比来微调五边形的倾斜角度和顶部宽度。

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