Este repositorio de GitHub, llamado 'fun-with-clip-path', presenta una ingeniosa implementación de un menú desplegable utilizando únicamente HTML y CSS, sin necesidad de JavaScript. La idea original se inspira en el trabajo de iVentions y se popularizó en X (anteriormente Twitter). El objetivo principal es demostrar el poder y la flexibilidad de la propiedad CSS clip-path para crear efectos visuales complejos.
¿Cómo funciona? El truco reside en el uso de dos clip-paths. El primero, y más llamativo, simula la revelación del menú a través de un círculo que se expande desde la esquina superior izquierda de la pantalla hasta la esquina inferior derecha. La clave aquí es el cálculo del radio del círculo: clip-path: circle(calc(1.42 * 100vmax) at 0 0);. vmax representa la dimensión más grande de la ventana del navegador (viewport), ya sea el ancho o la altura. Multiplicar vmax por 1.42 (la raíz cuadrada de 2) asegura que el círculo abarque la totalidad de la pantalla, independientemente de si es más ancho o más alto.