Create slanted navigation tabs

There are so many ways to create slanted navigation tabs, most of which involves the use of CSS :before and :after selectors which will in turn increase the size of your code.

Let me show you how you can create slanted navigation tabs with fewer lines of code. Let’s get started.

  1. Go to jsFiddle.net
  2. Create an unordered list with as many items as shown below or as many as you want.
    <ul>
    	<li><a>Home</a></li>
    	<li><a>About</a></li>
    	<li><a>Contact</a></li>
    </ul>
    
  3. Copy and paste the block of CSS code below into the CSS section of jsFiddle.net.Please pay attention to the comments so that you can understand what every line does.
    ul {
        display: block;
        width: auto;
        margin-top: 60px;
        background-color: blue;
        height: 45px;
        font-family: calibri;
        font-weight: bold;
        text-align: center;
    }
    li {
        display: inline-block;
        line-height: 45px;
        padding: 0 25px 0 25px;
        background-color: orange;
        font-size: 24px;
        transform: skew(-20deg); /* Skews the tab to the right */
        margin-right: -3px; /* For handling the spaces between the tabs */
    }
    
    li a {
        color: white;
        display: block; 
    }
    
  4. Click on run.
    Note: At this point, both the tab and its text are skewed. While some people might want to keep it that way, some may want the text to be normal. In order to have the text display properly, do the next step.
  5. Add the line of code below to the last block of CSS
    transform: skew(20deg); /* Absolutely necessary for the removal of the skew from the text */
    

    Note: The difference is that I took off the minus sign to return the text to its normal state.

  6. Now click on run again to see the final result.

See working and editable example here.

That is how simple it is to create slanted navigation tabs.
Let me know if you have any questions and I’d glad to help you.
Comments are appreciated.

Leave a Reply