CSS Shapes , rectangle with curve rectangular edges - html

Question

need help creating the shapes above with the curved rectangular angles...to insert images inside i can do that ...can someone help me out ...please...
I have tried using border-radius to selectively chose the edge i want rectangular
.curv {
width: 800px;
margin: 0 auto;
position: relative;
padding-top: 100px;
overflow: hidden;
}
.curv:before {
background: #333;
height: 200px;
left: -20px;
right: 0px;
top: 0px;
content: '';
position: absolute;
border-radius: 0% 0 0 0;
clip-path: polygon(53% 0, 100% 49%, 57% 100%, 0% 100%, 0 47%, 0% 0%);
}
.holder {
height: 200px;
background: #333;
position: relative;
z-index: 9999;
}
<div class="curv">
<div class="holder"></div>
</div>

Answer 1

I would use some pseudo element and the same background-image twice.
Here is an example (missing only one curve):
body {
background:pink;
}
.box {
margin:100px;
width:200px;
height:100px;
border-right:3px solid green;
border-bottom:3px solid green;
border-radius:0 0 10px 10px;
background:
url(https://lorempixel.com/200/150/) bottom;
position:relative;
}
.box:before {
content:attr(data-text);
color:#000;
font-weight:bold;
text-shadow:0px 0px 5px #fff;
text-align:center;
position:absolute;
height:50px;
top:-53px;
right:-3px;
width:50%;
background:
url(https://lorempixel.com/200/150/) top right;
border:3px solid green;
border-bottom:none;
border-radius:10px 10px 0 0;
}
.box:after {
content:"";
position:absolute;
left:-3px;
width:50%;
bottom:-3px;
height:100px;
border:3px solid green;
border-right:none;
border-radius:10px 0 0 10px;
}
<div class="box" data-text="SOME TEXT">
</div>