Menú, Skew con CSS y HTML

↑ Me gusta (1)

En este ejercicio trabajamos con la propiedad transform y el valor skew. Espero te guste estas técnicas y trucos de CSS y HTML para el diseño de una página Web, son los primeros pasos para un profesional en FrontEnd. Usamos esté código HTML para el ejemplo:

    <nav class="menu-main">
        <a href="#"><span>Home</span></a>
        <a href="#" class="active"><span>Informes</span></a>
        <a href="#"><span>Personalización</span></a>
        <a href="#"><span>Administrador</span></a>
        <a href="#"><span>Comentarios</span></a>
        <a href="#"><span>Perfíl</span></a>
        <a href="#"><span>Ayuda</span></a>
    </nav>

El CSS que da el formato correcto es:

body{
    margin: 0px;
    background: #d1d1d1;
}

.menu-main{
    display: flex;
    justify-content: space-between;
    width: 900px;
    margin: auto;
}

.menu-main a{
    flex: 1;
    font-family: arial;
    height: 45px;
    display: flex;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;    
    justify-content: center;
    align-items: center;
    background: #3b5998;
    margin: 0px 5px;
    transform: skew(-45deg);
}

.menu-main a span{
    transform: skew(45deg);
}

.menu-main a:hover{
    background-color: #29487d;
}

.menu-main a.active{
    background-color: #29487d;
}

Con esta base puedes avanzar y crear buenas y nuevas estructura visual y atractiva... ¿Qué te ha parecido?

  • Ernesto Canquiz

Italo Morales F. Italo Morales F. 6,800.00 XP