如何使半方形与图像在CSS?

Question

我到处找，但我没有找到解决我的问题。我无法在下图中达到这样的东西(我使用Bootstrap 5):

我的期待我想得到一半的正方形与彩色的bg和文本，和第二个一半的封面图像。

我已经创建了这样的代码，但这不是我想要的。

<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;
}

我不知道该走哪条路，也许你们知道解决办法?由于

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>