Закругление фона в CSS

полукруг https://codepen.io/artem-ayrapetyan/pen/WVQjVX

*{
  margin: 0;
  padding: 0;
}
.item{
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}
.item:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: green;
  border-radius:0 0 50% 50%/0 0 100% 100%;
  transform: scaleX(1.5);
}

волна http://jsfiddle.net/8n17L9ze/

#wave {
  position: relative;
  height: 70px;
  width: 100%;
  background: #e0efe3;
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 56%;
  width: 56.66%;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}
#wave:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 50%;
    height: 70px;
    background-color: #e0efe3;
    left: 0;
    top: 27px;
}

что бы сделать так как на скрине, нужно несколько волн наложить одна на одну со смещением, но проще всего бекграундом картинкой

Если по хорошему то рисовать надо это в SVG и потом сохранять в отдельный файл с расширением svg и подключать как фон того блока куда надо это применять

Вот для примера вот этот код из сниппета после просмотра можете скопировать, вставить в текстовый документ и сохранить как background.svg и подключить =>

<svg viewBox="0 30 700 200" xmlns="http://www.w3.org/2000/svg"> 
  <path d="M0,100 Q150,120 300,60 Q400,30 700,100 L700,200 0,200z" fill="#F7EEE9" /> 
  <path d="M0,120 Q150,140 300,70 Q400,20 700,100 L700,200 0,200z" fill="#FAF5F2" /> 
  <path d="M0,140 Q150,136 300,70 Q400,0 700,110 L700,200 0,200z" fill="#004153" /> 
</svg>

Это делается с помощью border-radius

.fon { 
  width: 100%; 
  height: 45%; 
  background-color: #494949; 
  position: absolute; 
  top: 55%; 
  left: 0px; 
} 
 
.fon1 { 
  width: 100%; 
  height: 10%; 
  background-color: #494949; 
  border-radius: 100% 100% 0px 0px; 
  position: absolute; 
  top: 45%; 
  left: 0px; 
} 
 
.icon { 
  width: 40%; 
  height: 30%; 
  background-color: #f0f0f0; 
  position: absolute; 
  top: 40%; 
  left: 40%; 
  border-radius: 3px; 
}

<div class="fon1"></div> 
<div class="fon"></div> 
<div class="icon"></div>