Как сделать границу между одним компонентом и окружением трапеции [дубликат] ⇐ CSS

[Anonymous]

У меня есть компонент, который представляет собой карточку с баннером в формате трапеции, и одним из требований CSS является наличие рамки вокруг этого компонента, но баннер представляет собой трапецию, и теперь мне кажется, что сложно создать рамку именно в этом формате.
Как я могу добиться этого в CSS? Пожалуйста, мне нужна помощь только для рамки вокруг формата трапеции.
Граница находится не только в трапеции, но и затрагивает компонент карты, особенно там, где встречаются нижняя часть трапеции и компонент карты. Так что я думаю, это не очень поможет: CSS – Как добавить цвет границы к фигуре CSS


Я создал этот код в качестве ссылки на часть своего кода: https://codesandbox.io/p/sandbox/react-compiler-vgbeg

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

{/* Vote Now Banner */}


{/* Match Container */}

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

.matchLiveEventCard {
width: 100%;
max-width: 343px;
margin: 0 auto;
/* border: 1px solid var(--color-red); */
border-left: 1px solid var(--color-red);
border-right: 1px solid var(--color-red);
border-bottom: 1px solid var(--color-red);
border-top: none; /* 
Vote now


);
}

css для баннера

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

.notificationBanner {
display: flex;
/* height: 28px; */
width: 100%;
overflow: hidden;
z-index: 0;
}

Ссылка на то, чего я достиг.



Подробнее здесь: https://stackoverflow.com/questions/798 ... d-surround