<!--
<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.