Skewed Menu

Written by nick • 10.06.2025

#skewed #menu #hovereffects

The other day, someone in our Wishlist asked for a tutorial on pretty hover effects. That got me thinking—there are already tons of hover effects out there. I wanted to find something different, and that's when I remembered our old design from 2017. ✨

While it might look a bit dated now, maybe it's still worth revisiting? Hope this is just what you were looking for, Clarissa! 🤞🥹

1. The basic HTML

Let's start with the basic HTML, as always.

Create a file called index.html and paste the following code:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<style>
    <!-- We will paste the CSS here -->
</style>

<nav class="skew-container">
    <ul>
        <li class="menu-item"><a href="#"></a></li>
        <li class="menu-item"><a href="#"></a></li>
        <li class="menu-item"><a href="#"></a></li>
        <li class="menu-item"><a href="#"></a></li>
        <li class="menu-item"><a href="#"></a></li>
    </ul>
</nav>

This is the basic structure of our menu.

2. A little bit of CSS

To make customization easier, let's define a :root variable for the menu base color. This will allow us to generate multiple shades dynamically. We'll also set a body font family for consistency. Defining this in the root variable allows us to reuse these colors throughout our CSS file.

:root {
    --menu-base-color: #590a76;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

Next, we'll add CSS for the skew container—this will actually take care of the skewing effect.

/* Skew Container */
.skew-container {
    position: relative;
    max-width: 300px;
    transform-origin: bottom left;
    transform: skew(-28deg, 0deg);
}

Since we're using an <ul> navigation, we have to set the list-style to none, to remove the default bullet points next to them. We will also add some basic CSS stylings in this step already:

/* Links */
.skew-container ul {
    list-style: none;
}

.menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 8pt;
    color: #fff;
    text-decoration: none;
    transition: background 0.5s ease-in-out;
}

Now the most important part of the CSS—since we're applying the skewing transformation to the menu container, we have to reverse this effect for the text of the links (and also the FontAwesome icons in it):

/* Revert the skewing effect for the text and icon within the link */
.menu-item a div,
.menu-item a .icon {
    transform: skew(28deg, 0deg);
}

And lastly, we'll automatically create the different shades of the base menu background color and add a simple hover effect:

/* Creates different shades of the menu base color, 10% darker each time */
.menu-item.color-1 a { background: var(--menu-base-color); }
.menu-item.color-2 a { background: color-mix(in srgb, var(--menu-base-color) 90%, black); }
.menu-item.color-3 a { background: color-mix(in srgb, var(--menu-base-color) 80%, black); }
.menu-item.color-4 a { background: color-mix(in srgb, var(--menu-base-color) 70%, black); }
.menu-item.color-5 a { background: color-mix(in srgb, var(--menu-base-color) 60%, black); }

/* Hover Effects */
.menu-item a:hover {
    background: color-mix(in srgb, var(--menu-base-color) 45%, black);
}

.menu-item a:hover .icon {
    color: #f1f15d;
}

3. Putting it all together

With all the necessary classes in place, we can now refine our original HTML and complete the menu! ☺️

To ensure text alignment remains unaffected by the skewing effect, wrap the menu text inside <div> tags. We'll also add FontAwesome icons using the .icon class so they remain unaffected by the skewing as well.

The final index.html could look like this now:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<style>
:root {
    --menu-base-color: #590a76;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Skew Container */
.skew-container {
    position: relative;
    max-width: 300px;
    transform-origin: bottom left;
    transform: skew(-28deg, 0deg);
}

/* Links */
.skew-container ul {
    list-style: none;
}

.menu-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 8pt;
    color: #fff;
    text-decoration: none;
    transition: background 0.5s ease-in-out;
}

/* Revert the skewing effect for the text and icon within the link */
.menu-item a div,
.menu-item a .icon {
    transform: skew(28deg, 0deg);
}

/* Creates different shades of the menu base color, 10% darker each time */
.menu-item.color-1 a { background: var(--menu-base-color); }
.menu-item.color-2 a { background: color-mix(in srgb, var(--menu-base-color) 90%, black); }
.menu-item.color-3 a { background: color-mix(in srgb, var(--menu-base-color) 80%, black); }
.menu-item.color-4 a { background: color-mix(in srgb, var(--menu-base-color) 70%, black); }
.menu-item.color-5 a { background: color-mix(in srgb, var(--menu-base-color) 60%, black); }

/* Hover Effects */
.menu-item a:hover {
    background: color-mix(in srgb, var(--menu-base-color) 45%, black);
}

.menu-item a:hover .icon {
    color: #f1f15d;
}
</style>


<nav class="skew-container menu-nav">
    <ul>
        <li class="menu-item color-1"><a href="#"><div>Home</div> <i class="icon fa-solid fa-fw fa-home"></i></a></li>
        <li class="menu-item color-2"><a href="#"><div>About</div> <i class="icon fa-solid fa-fw fa-desktop"></i></a></li>
        <li class="menu-item color-3"><a href="#"><div>Affiliates</div> <i class="icon fa-solid fa-fw fa-globe"></i></a></li>
        <li class="menu-item color-4"><a href="#"><div>Guestbook</div> <i class="icon fa-solid fa-fw fa-book"></i></a></li>
        <li class="menu-item color-5"><a href="#"><div>Contact</div> <i class="icon fa-solid fa-fw fa-envelope"></i></a></li>
    </ul>
</nav>

Aaaaand you're done! ✨