Saltar al contenido principal
Codigo Heroe
Volver al inicio del nivel
CSS shape() #1 / Práctica1/14
Volver al inicio del nivel
  1. 1. Función de recorte I
  2. 2. Función de recorte II
  3. 3. Coordenadas iniciales I
  4. 4. Coordenadas iniciales II
  5. 5. Posición inicial con palabras clave I
  6. 6. Posición inicial con palabras clave II
  7. 7. Líneas rectas I
  8. 8. Líneas rectas II
  9. 9. Coordenada horizontal de la línea
  10. 10. Coordenada vertical de la línea
  11. 11. Líneas horizontales I
  12. 12. Líneas horizontales II
  13. 13. Líneas verticales I
  14. 14. Líneas verticales II
Siguiente desafío
  • Matriz de skills

Cargando…
Estará listo en unos segundos.

  • Desafío

Función de recorte I

Replica el ejemplo modificando el código
DificultadMedia
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desafío</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-1.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="stage"> <div class="ruler-h"></div> <div class="ruler-v"></div> <div class="shape-shell"> <div class="shape"></div> <div class="vertices"></div> </div> </main> </body> </html>
.shape { clip-path: {{functionName}}( from 40px 0px, line to 280px 0px, line to 320px 220px, line to 0px 220px, close ); }
-1
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.

    Desafío completado

    Movimientos adicionales
    Continuar
    Codigo Heroe

    © 2023-2026, codigoheroe.com