image with 3 lines on itI am looking to create a color element that resembles a border but slightly overlaps the bottom part of the image - similar to the example shown in the linked picture.
I attempted to use CSS borders, but it did not achieve the desired effect. Any assistance would be greatly appreciated.
I have also incorporated Bootstrap5 into the project.
*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;
}<div class="imageFrameLeft">
<img class="img-fluid mr-5" src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg" alt="">
</div>
<div class="imageFrameRight">
<img class="img-fluid mr-5" src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE-1200x800.jpg" alt="">
</div>