Teoría
Teoría

Degradados con ángulos

La dirección de un degradado lineal también puede indicarse con cualquier ángulo, por ejemplo, 245°. Para expresar la dirección en grados se usa la unidad deg. Los ángulos pueden ser positivos o negativos. Por ejemplo:

background-image: linear-gradient(90deg, yellow, green);
background-image: linear-gradient(-135deg, yellow, green);

Los ángulos del degradado se miden así:

Esquema de los ángulos de un degradado

0deg corresponde a las 12 en un reloj, y el ángulo se mide en el sentido de las manecillas. Si el ángulo es negativo, por ejemplo, -90deg, se mide en el sentido contrario.

En este ejercicio hay que añadir degradados a las otras tres «hojas», siguiendo el ejemplo de la primera: desde el borde de color de la «hoja» hasta el centro negro de la «flor».

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Degradados con ángulos</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flower"> <div class="leaf leaf-top-left"></div> <div class="leaf leaf-top-right"></div> <div class="leaf leaf-bottom-left"></div> <div class="leaf leaf-bottom-right"></div> </div> </body> </html>

CSS

.leaf-top-left { background-image: linear-gradient(135deg, #ff0000, #000000); } .leaf-top-right { /*degradado de #00ff00 a #000000*/ } .leaf-bottom-right { /*degradado de #ffff00 a #000000*/ } .leaf-bottom-left { /*degradado de #ff00ff a #000000*/ } .leaf-top-left, .leaf-bottom-right { border-radius: 0 50%; } .leaf-top-right, .leaf-bottom-left { border-radius: 50% 0; } .leaf { float: left; margin: 0; width: 150px; height: 150px; background-color: #dfdfdf; } .flower { margin: 0 auto; padding-top: 80px; width: 300px; } html, body { margin: 0; height: 100%; }

ObjetivosRealizado

Termina de colorear la flor con degradados:

Asigna a la hoja superior derecha un degradado con un ángulo de 225°.
Asigna a la hoja inferior derecha un degradado con un ángulo de 315°.
Asigna a la hoja inferior izquierda un degradado con un ángulo de 45°.

Los colores de las hojas están indicados en los comentarios del CSS.