<!-- 
<svg width="200px" height="400px" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 V 50 C 40 0, 60 0, 100 50 C 140 100, 160 100, 200 50 V 0 Z" fill="white"/>
  <path d="M0 400 V 350 C 40 300, 60 300, 100 350 C 140 400, 160 400, 200 350 V 400 Z" fill="white"/>
</svg>
 -->
<div class="wave">
  <div class="card"><a href='#'>first</a></div>
  <div class="card"><a href='#'>second</a></div>
  <div class="card"><a href='#'>third</a></div>
</div>

body {
  margin: 0;
}
.wave {
  position: relative;
  width: 100%;
  height: 400px;
  margin-top: 30px;
  padding: 0 5% 0 5%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}
.wave::before, .wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.wave::before {
  z-index: -3;
  background: url(https://images.unsplash.com/photo-1513346940221-6f673d962e97?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50% 0;

}
.wave::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V 100 C 40 50, 60 50, 100 100 C 140 150, 160 150, 200 100 V 0 Z' fill='white'/%3E%3Cpath d='M0 400 V 350 C 40 300, 60 300, 100 350 C 140 400, 160 400, 200 350 V 400 Z' fill='white'/%3E%3C/svg%3E") repeat-x;
  background-size: 400px 400px;
  z-index: -1;
}


.card {
  width: 200px;
  height: 200px;
  border: 10px solid white;
  border-radius: 10px;
  box-shadow: 0 0 10px #888;
  position: relative;
  margin-top: 20px;
}
.card::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 200px;
  background: red;
}
.card:nth-child(1)::before {
  background: url(https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card:nth-child(2)::before {
background-image: url(https://images.unsplash.com/photo-1486025402772-bc179c8dfb0e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card:nth-child(3)::before {
background-image: url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
.card a {
  display: block;
  text-align: center;
  padding-top: 10px;
}