你应该在CSS中使用clip-path属性，https://bennettfeely.com/clippy/是一个方便的工具，可以减轻你的工作。

.parent {
position: relative;
height: 100vh
width: 100vh
}

.yellow {
position: absolute;
background: yellow;
top: 0;
left: 0;
height: 100%;
width: 50%;
clip-path: polygon(0 0, 75% 0, 75% 20%, 100% 20%, 100% 80%, 75% 80%, 75% 100%, 0 100%);
}

<div class="parent">
<img src="https://media.istockphoto.com/id/1347879996/photo/shot-of-a-young-woman-using-a-laptop-while-working-in-a-server-room.jpg?s=1024x1024&w=is&k=20&c=bIS0VEKe2WvkahJn6FKbutRqgGa4yDfeU13OUjQ6NOU=" alt="background-img" width="100%">
<div class="yellow"></div>
</div>