CSS阶梯边框实现求助：透明背景下消除分割边框

问题描述 #

尝试用HTML/CSS还原海报标题设计，纯色背景时效果符合预期，但设置背景透明以显示底层图片后，上下两个标题模块间出现分割边框，不符合设计需求。

解决代码及说明 #

修改后的完整代码 #

CSS

html {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: url(https://www.iwa.ie/app/themes/iwa-theme/resources/assets/img/sport/basketball/senior-league-main-hero.webp) 50% / cover;
}

.branded-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-header-top {
  display: inline-block;
  border: 2px solid #fff;
  border-bottom: none;
  border-radius: 8px 20px 0 0;
  padding: 7px 37px 0px 20px;
  text-align: left;
  font-size: 35px;
  background: transparent;
  position: relative;
  z-index: 1;
  color: #fff;
}

.brand-header-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100% - 20px);
  height: 2px;
  background-color: #fff;
}

.brand-header-bottom {
  display: inline-block;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 8px 8px 8px;
  padding: 16px 19px 6px 20px;
  text-align: left;
  font-size: 53px;
  background: transparent;
  font-family: CentraleSans, sans-serif;
  color: #fff;
  line-height: 64px;
}

HTML

<div class="container">
  <div class="branded-header" style="margin-top: 60px">
    <div class="brand-header-top">
      Wheelchair Basketball
    </div>
    <div class="brand-header-bottom">
      Senior League 2024/2025
    </div>
  </div>
</div>

核心修改点 #

1. 修复无效CSS值：将原代码中错误的background: #transparent改为标准的background: transparent。
2. 移除冗余边框：给.brand-header-bottom设置border-top: none，避免上下边框重叠产生视觉分割线。
3. 补充连贯边框：通过.brand-header-top::after伪元素在顶部模块底部右侧绘制白色边框，衔接底部模块的左侧边框，保证整体边框的完整性。
4. 调整模块间距：删除底部模块的负margin设置，让两个模块自然贴合，避免不必要的偏移。

修改后，透明背景下上下模块之间不会出现分割边框，完全匹配设计效果。

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