如何使用CSS在div底部实现Header Border bottom自定义装饰效果

实现方案 #

你选择用伪元素实现的方向是正确的，只需要调整定位逻辑和父元素配置即可达到预期效果，具体实现如下：

核心思路 #

利用绝对定位的旋转矩形，配合父容器的溢出裁切，只露出底部需要的装饰角部分。

完整代码 #

HTML结构

<div class="header">
  头部内容
</div>

SCSS样式

.header {
  position: relative;
  height: 80px;
  // 替换为你的头部渐变背景
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
  padding: 0 24px;
  line-height: 80px;
  // 关键：裁切伪元素超出头部范围的部分
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  // 调整数值控制装饰角距离右侧的位置
  right: 32px;
  // 调整数值控制装饰角突出的高度
  bottom: -28px;
  width: 80px;
  height: 80px;
  // 替换为你的装饰层渐变/颜色
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(45deg);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

原有代码问题排查 #

1. 定位用了top: -10%，导致伪元素渲染在头部上方，修改为bottom属性即可放到底部区域
2. 父元素没有加overflow: hidden，导致整个旋转的正方形都被显示出来
3. 宽高、定位数值不需要使用过于精确的小数，用整数更便于后期维护

可选方案：clip-path自定义形状 #

如果需要更灵活的自定义装饰形状，可以不用旋转裁切，直接用clip-path绘制目标形状：

.header::after {
  content: '';
  position: absolute;
  right: 32px;
  bottom: 0;
  width: 60px;
  height: 20px;
  background: #7c3aed;
  // 调整坐标即可修改为任意你需要的形状
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

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