Forma ondulada con CSS
Estoy intentando recrear esta imagen con CSS:
No necesitaría que se repita. Esto es lo que comencé pero solo tiene una línea recta:
#wave {
position: absolute;
height: 70px;
width: 600px;
background: #e0efe3;
}<div id="wave"></div>
Creo que esta es la forma correcta de hacer la forma que quieras. Utilizando las posibilidades de SVG y un contenedor para mantener la forma receptiva.
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;
}<div class="container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
</svg>
</div>
No estoy seguro de que sea tu forma, pero se acerca; puedes jugar con los 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;
}<div id="wave"></div>
Mi implementación usa el elemento svg en html y también hice un generador para hacer la onda que deseas:
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
<div style="height: 150px; overflow: hidden;">
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z" style="stroke: none;fill: #e1efe3;"></path>
</svg>
</div>
https://jsfiddle.net/1b8L7nax/5/
Me gusta la respuesta de ThomasA, pero quería un contexto más realista con la onda utilizada para separar dos divs. Así que creé una demostración más completa donde el separador SVG se coloca perfectamente entre los dos divs.
Ahora pensé que sería genial ir más allá. ¿Qué pasaría si pudiéramos hacer todo esto en CSS sin la necesidad del SVG en línea ? El punto es evitar un margen adicional. Así es como lo hice:
Dos simples <div>:
/** CSS using pseudo-elements: **/
#A {
background: #0074D9;
}
#B {
background: #7FDBFF;
}
#A::after {
content: "";
position: relative;
left: -3rem;
/* padding * -1 */
top: calc( 3rem - 4rem / 2);
/* padding - height/2 */
float: left;
display: block;
height: 4rem;
width: 100vw;
background: hsla(0, 0%, 100%, 0.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 70 500 60' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='500' style='stroke: none; fill: %237FDBFF;' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none; fill: %230074D9;'%3E%3C/path%3E%3C/svg%3E");
background-size: 100% 100%;
}
/** Cosmetics **/
* {
margin: 0;
}
#A,
#B {
padding: 3rem;
}
div {
font-family: monospace;
font-size: 1.2rem;
line-height: 1.2;
}
#A {
color: white;
}<div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec quam tincidunt, iaculis mi non, hendrerit felis. Nulla pretium lectus et arcu tempus, quis luctus ex imperdiet. In facilisis nulla suscipit ornare finibus. …
</div>
<div id="B" class="wavy">… In iaculis fermentum lacus vel porttitor. Vestibulum congue elementum neque eget feugiat. Donec suscipit diam ligula, aliquam consequat tellus sagittis porttitor. Sed sodales leo nisl, ut consequat est ornare eleifend. Cras et semper mi, in porta nunc.</div>Divisor ondulado de demostración (con pseudoelementos CSS para evitar marcas adicionales)
Fue un poco más complicado de colocar que con un SVG en línea, pero funciona igual de bien. (Podría usar propiedades personalizadas de CSS o variables de preprocesador para mantener la altura y el relleno fáciles de leer).
Para editar los colores, debe editar el SVG codificado en URL.
Preste atención (como en la primera demostración) a un cambio en el archivoviewBox para eliminar espacios no deseados en el SVG. (Otra opción sería dibujar un SVG diferente).
Otra cosa a la que hay que prestar atención aquí es la background-sizeconfiguración para 100% 100%que se estire en ambas direcciones.
Mi implementación de CSS pura basada en lo anterior con 100% de ancho. ¡Espero eso ayude!
Mostrar fragmento de código
