- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Posiciones de las paradas de color en píxeles</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(-45deg, #f00000 30px, #000000 30px, #000000 40px, #ff0000 40px, #ff0000 70px, #000000 70px);
}
.leaf-top-right {
/* colores: #00ff00, #000000, #00ff00, #000000 */
}
.leaf-bottom-right {
/* colores: #ffff00, #000000, #ffff00, #000000 */
}
.leaf-bottom-left {
/* colores: #ff00ff, #000000, #ff00ff, #000000 */
}
.leaf-top-left,
.leaf-bottom-right {
border-radius: 0 50%;
}
.leaf-top-right,
.leaf-bottom-left {
border-radius: 50% 0;
}
.leaf {
float: left;
width: 150px;
height: 150px;
background-color: #dfdfdf;
}
.flower {
margin: 70px auto;
width: 300px;
}
html,
body {
margin: 0;
padding: 0;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Termina de colorear la flor con degradados de transiciones bruscas:
- Asigna a la hoja superior derecha un degradado con un ángulo de
45°. - Asigna a la hoja inferior derecha un degradado con un ángulo de
135°. - Asigna a la hoja inferior izquierda un degradado con un ángulo de
225°.
Los colores de las hojas están indicados en los comentarios del CSS. Usa las mismas posiciones de las paradas de color que en la primera hoja.