es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Aplicando un degradado a una div inclinada.

29 Jul, 2023 Programación

ver la imagen en el fragmento que tiene un degradado de color en algún ángulo. No puedo crear un degradado de color de arriba hacia abajo

el div hijo debería tener background: linear-gradient(0deg, #FF6633 0%, #CC0066 100%), con algún ángulo inclinado y el color debería ser un degradado de arriba hacia abajo.

cualquier solución
para el fondo del div padre: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
para el fondo del div hijo: linear-gradient(0deg, #FF6633 0%, #CC0066 100%) y algún
ángulo inclinado

gracias.

  .parent{
        width: 100%;
        height: 900px;
        background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
    }
    .child{
        width:50%;
        height: 900px;
        float: right;
         background: linear-gradient(75deg  , transparent 50%, #FF6633 0%, #CC0066 100%);

   }


   <div class=parent>
          <div class=child>
    </div>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el degradado de color de arriba a abajo para el div hijo, cambia el parámetro de ángulo en la propiedad background de 75deg a 0deg. Esto hará que el degradado comience desde la parte superior y termine en la parte inferior. El CSS actualizado para el div hijo será:

    .child{
  width:50%;
  height: 900px;
  float: right;
  background: linear-gradient(0deg, #FF6633 0%, #CC0066 100%);
}

    Para agregar un ángulo inclinado al div hijo, puedes ajustar el valor del ángulo en la propiedad background para que sea diagonal. Por ejemplo, puedes cambiarlo a 45deg para crear un degradado diagonal de 45 grados:

    .child{
  width:50%;
  height: 900px;
  float: right;
  background: linear-gradient(45deg, #FF6633 0%, #CC0066 100%);
}

    Recuerda que el primer valor en la función linear-gradient especifica el ángulo o dirección del degradado. Los segundo y tercer valores especifican los colores de inicio y finalización.

Comments are closed.