Элемент стиля CSS в верхней части изображения ⇐ CSS

[Anonymous]

Изображение с тремя линиямиЯ хочу, чтобы цветной элемент выглядел как рамка, но слегка перекрывал изображение в нижней части — как на прикрепленном изображении.
Я пробовал поиграть с рамкой CSS, но это не сработало должным образом.
Буду признателен за любую помощь.
Я также использовал Bootstrap5.
введите здесь описание изображения

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

*image frame left styling original*/
.imageFrameLeft {
display: inline-block;
/*  position: relative;*/
position: relative;
font-size: 0;
}

.imageFrameLeft::before, .imageFrameLeft::after {
position: absolute;
border-style: solid;
border-color: violet;
content: '';
}

.imageFrameLeft::before {
top: 0rem;

right: 35rem;

bottom: 6rem;

left: 0;
border-width: 6.5rem 0 6.5rem 0;

}

.imageFrameLeft::after {
top: 0;
right: 6.5rem;

bottom: 6.5rem;
left: 0rem;
border-width: 0 0rem 0 6.5rem;

}

.imageFrameRight {
display: inline-block;
position: relative;
font-size: 0;
}

.imageFrameRight::before, .imageFrameRight::after {
position: absolute;
border-style: solid;
border-color: navy;
content: '';
}

.imageFrameRight::before {
top: 0rem;

right: 0rem;
bottom: 6.5rem;

left: 35rem;
border-width: 6.5rem 0 6.5rem 0;

}

.imageFrameRight::after {
top: 0;
right: 0rem;
bottom: 6.5rem;
left: 5rem;
border-width: 0 6.5rem 0 0rem;
}

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

[img]https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg[/img]

[img]https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/784 ... f-an-image