<div class="wave"/>
<div/>
.wave {
position: relative;
height: 70px;
max-width: 600px;
width:100%;
background: #d63e3e;
margin: 0 auto;
}
.wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 57%;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
.wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 51%;
height: 70px;
background-color: #d63e3e;
left: 0;
top: 27px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.