Teoría
Teoría

Diagonales frente a grados

A veces, los degradados cuya dirección se indica en grados y los que usan palabras clave para las diagonales se ven iguales.

to right top

45deg

Sin embargo, sus direcciones se comportan de forma distinta. Cuando se indican en grados, no dependen de la forma del contenedor; cuando se indican con palabras clave para las diagonales, sí. Estas últimas siempre quedan vinculadas a sus esquinas.

Claro que, si los contenedores son cuadrados, no se aprecia la diferencia. Pero ¿qué pasa si aumentamos su altura? Vamos a comprobarlo.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Diagonales frente a grados</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <div class="gradient gradient-diagonal"></div> <div class="gradient gradient-degrees"></div> </div> </body> </html>

CSS

html, body { margin: 0; } .content { margin: auto; margin-top: 150px; width: 350px; } .gradient { width: 150px; height: 150px; box-shadow: 0 0 3px #333333; } .gradient-diagonal { float: left; background-image: linear-gradient(green, yellow, green); } .gradient-degrees { float: right; background-image: linear-gradient(green, yellow, green); }

ObjetivosRealizado

Asigna al degradado del bloque .gradient-diagonal una dirección desde
la esquina inferior izquierda hasta la superior derecha.
Asigna al degradado del bloque .gradient-degrees un ángulo de 45°.
Después, aumenta la altura de ambos bloques a 300px.