I've been searching high and low for a solution to my problem, but I just can't seem to achieve something like the image below (I'm using Bootstrap 5):
What I'm aiming for is to have one half of a square with a colored background and text, and the other half with a cover image.
I've already tried writing code like this, but it's not quite right:
<div class="row g-0">
<div class="col-7 bg-main">any text here</div>
<div class="col-5 bg-light position-relative">
<div class="triangle-shape"></div>
<img src="images/nature.jpg" class="img-fluid" />
</div>
</div>
.triangle-shape {
position: absolute;
width: 0;
height: 0;
border-top: 140px solid var(--main-color);
border-right: 140px solid transparent;
}
I'm at a loss here and not sure which direction to take. Any ideas or solutions you can share? Thanks in advance!