CSS Shapes , rectangle with curve rectangular edges

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>