Teoría
Teoría

Degradados diagonales

Los degradados pueden ir en diagonal, de una esquina a otra. Para ello, combina una palabra clave vertical (top o bottom) con una horizontal (left o right). Por ejemplo, este degradado va de la esquina inferior izquierda a la superior derecha:

background-image: linear-gradient(to right top, yellow, green);

Estos son algunos ejemplos de degradados diagonales con los colores yellow, green:

`to right top`
`to right bottom`
`to left bottom`
`to left top`

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Degradados diagonales</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <h1>¡Hola, linear-gradient!</h1> </div> </body> </html>

CSS

html, body { margin: 0; height: 100%; } .content { height: 100%; background-color: yellow; background-image: none; /* Colores del degradado: yellow, green */ } h1 { margin: 0; padding-top: 250px; text-align: center; font-size: 30px; font-family: "Georgia", serif; }

ObjetivosRealizado

Asigna a .content un degradado de amarillo a verde con estas direcciones:

de la esquina superior izquierda a la inferior derecha
a la esquina superior izquierda desde la inferior derecha
de la esquina inferior izquierda a la superior derecha
a la esquina inferior izquierda desde la superior derecha