Tengo dos divs con un fondo degradado distinto y necesito crear una curva en forma de S entre ellos.
Este es el ejemplo del violín para divs de gradiente: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/
#section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); }
Hay un par de cosas que cruzaron mi mente pero:
– svg: no sé cómo manejar otras div gradiente.
– radio del borde: no pude obtener una verdadera curva en forma de S y se pone feo cuando cambio el tamaño de la pantalla.
– clip-path: no es compatible con algunos navegadores https://caniuse.com/css-clip-path
– imagen png: no ! Necesita ser contenido dynamic.
¡Cualquier ayuda sería apreciada!
PD: una lectura obligada para futuros lectores: https://css-tricks.com/creating-non-rectangular-headers/
Aquí hay una solución usando linearGradient con SVG.
.container { width: 500px; height: 200px; background:linear-gradient(to bottom right, #de350b, #0065ff); } svg { width:100%; }