Quiero lograr el efecto que figura en la imagen, que quede esa división entre el color amarillo y el color blanco, he intentado con el background-image: linear-gradient()
pero sólo me crea la linea divisora dentro del div
amarillo.
-
Acabo de encontrar la respuesta stackoverflow.com/questions/22352311/…– Ernesto Emmanuel Yah Lopezel 30 mar. 2019 a las 19:46
-
2me alegra que encontraras una solución. por favor pon eso como respuesta (con más información, no solo en enlace). Lee Cómo responder para más información.– Alvaro Montoro ♦el 30 mar. 2019 a las 20:42
-
1He hecho algo parecido en algunos sitios usando linear-gradient con el before/after. Luego veo si de eso va la respuesta que encontraste (estoy en móvil y se hace difícil). Y te pongo una respuesta si no lo es.– Alvaro Montoro ♦el 30 mar. 2019 a las 20:43
1 respuesta
He realizado diseños parecidos usando linear-gradient
junto con los pseudo-elementos ::before
y ::after
. La idea es dejar un espacio abajo del contenedor (usando padding
) y entonces colocar el pseudo-elemento de forma absoluta y con un linear-gradient
que vaya de la esquina superior izquierda a la esquina inferior derecha (dejando un porcentaje mínimo entre los valores para que no se vea un corte brusco).
Aquí lo puedes ver:
section {
min-height: 100px;
}
section.dark {
background: #beeeef;
padding-bottom: 40px;
position: relative;
}
section.dark::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-image: linear-gradient(to right bottom, #beeeef 50%, #fff 50.1%);
}
<section class="dark">
Sección 1
</section>
<section>
Sección 2
</section>
También se puede hacer sin necesidad de pseudo-elementos: poniéndole directamente un linear-gradient
al contenedor. El problema es que vas a tener que calcular los valores dependiendo del ancho de la pantalla o puede que no se vea bien.