Forma ondulada com css

Estou tentando recriar esta imagem com CSS:

forma viril

Eu não precisaria disso para repetir. Isso é o que eu comecei, mas tem apenas uma linha reta:

#wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } 
 

Não tenho certeza se é a sua forma, mas está perto – você pode brincar com os valores:

https://jsfiddle.net/7fjSc/9/

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

Eu acho que este é o caminho certo para fazer uma forma como você quer. Usando as possibilidades do SVG e um contêiner para manter a forma responsiva.

 svg { display: inline-block; position: absolute; top: 0; left: 0; } .container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } 
 

Minha implementação CSS pura baseada acima com 100% de largura. Espero que ajude!

 #wave-container { width: 100%; height: 100px; overflow: hidden; } #wave { display: block; position: relative; height: 40px; background: black; } #wave:before { content: ""; display: block; position: absolute; border-radius: 100%; width: 100%; height: 300px; background-color: white; right: -25%; top: 20px } #wave:after { content: ""; display: block; position: absolute; border-radius: 100%; width: 100%; height: 300px; background-color: black; left: -25%; top: -240px; } 
 

Minha implementação usa o elemento svg em html e também fiz um gerador para fazer a onda que você quer:

https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections

 

https://jsfiddle.net/1b8L7nax/5/