Saltar al contenido principal
Codigo Heroe
Tarea anterior
Degradados lineales14/19
A la lista de tareas
  1. 1. ¡Hola, linear-gradient!
  2. 2. La dirección del degradado
  3. 3. Degradados diagonales
  4. 4. Degradados con ángulos
  5. 5. Diagonales frente a grados
  6. 6. Degradados uniformes de varios colores
  7. 7. Proporciones y paradas de color
  8. 8. Transiciones bruscas entre colores
  9. 9. Columnas simuladas con degradados
  10. 10. Posiciones de las paradas de color en píxeles
  11. 11. Degradados semitransparentes
  12. 12. Degradados lineales que se repiten
  13. 13. Construir un fondo complejo: parte 1
  14. 14. Construir un fondo complejo: parte 2
  15. 15. Construir un fondo complejo: parte 3
  16. 16. Construir un fondo complejo: final
  17. 17. Botones: parte 1
  18. 18. Botones: parte 2
  19. 19. Botones: parte 3
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Construir un fondo complejo: parte 2

Sigamos con el patrón.

En este paso tienes que añadir otros dos degradados para obtener un fragmento con forma de rombo negro.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Construir un fondo complejo: parte 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="pattern"></div> </body> </html>
CSS
.pattern { margin: 100px auto; width: 100px; height: 100px; background-color: #333333; background-image: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%), none, none; box-shadow: 1px 1px 3px #333333; } html, body { margin: 0; padding: 0; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Añade al bloque .pattern otros dos degradados de white a transparent con una transición brusca en el 25%:

    1. El tercer degradado debe tener un ángulo de 45°,
    2. y el cuarto, un ángulo de 315°.
    Codigo Heroe

    © 2023-2026, codigoheroe.com