Ступенчатая граница CSS — воссоздание фрагмента дизайна ⇐ CSS

[Anonymous]

Я пытаюсь воссоздать дизайн заголовка постера в html/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-bottom {
display: inline-block;
border: 2px solid #fff;
border-top: 2px solid #fff;
border-radius: 0 8px 8px 8px;
padding: 16px 19px 6px 20px;
text-align: left;
font-size: 53px;
background: #transparent;
margin-top: -2px;
font-family: CentraleSans, sans-serif;
color: #fff;
line-height: 64px;
}

Код: Выделить всё

Wheelchair Basketball

Senior League 2024/2025

Подробнее здесь: https://stackoverflow.com/questions/791 ... sign-piece