How to make half-square with image in CSS?

Question

I searched everywhere but i didn't find solution for my problem. I can't reach something like this in image bellow (i'm using Bootstrap 5):

My expection

I would like to get half square with colored bg and text, and second half with cover image.

I already created code like this but it's not what i want.

    <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 not sure which way to go, maybe you guys know a solution? Thanks

Answer 1

section {
            background-image: url(https://live.staticflickr.com/1466/25978996034_4d049d33aa_z.jpg);
            width: 20em;
            height: 20em;
        }

        div {
            clip-path: polygon(0 0, 100% 0, 47% 100%, 0% 100%);
            background-color: lime;
            width: 50%;
            height: 100%;
        }
Modify according to your requirement.

 <section>
        <div></div>
    </section>