How to tilt hover in CSS - html

Question

I try to stylize hover for the header.
It shows like this.
And I want to make it look like this:
Even when I tried skew, the text was also tilting with it.
Help will be appreciated.
Here is my code:
.hvr-link {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-link:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #424141;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-link:hover,
.hvr-link:focus,
.hvr-link:active {
color: white;
}
.hvr-link:hover:before,
.hvr-link:focus:before,
.hvr-link:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<div class="col-md-7 col-sm-12">
<div class="nav-outer clearfix menu-bg">
<!--main-menu start-->
<nav class="main-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="hvr_link"><a class="hvr-link" href="#top">Home</a>
</li>
<li><a class="hvr-link" href="#service">Services</a>
</li>
<li class="dropdown"><a class="hvr-link" href="#">About</a>
<ul>
<li><a class="hvr-link" href="#aboutmy">About</a></li>
<li><a class="hvr-link" href="#teammy">Team</a></li>
</ul>
</li>
<li><a class="hvr-link" href="#portfoliomy">Portfolio</a>
</li>
<li><a class="hvr-link2" href="#propertymy">Properties</a>
</li>
<li><a class="hvr-link2" href="#contactmy">Contact</a></li>
</ul>
</div>
<div class="clearfix"></div>
</nav>
<!--main-menu end-->
</div>
</div>

Answer 1

In this context, it can be a little bit tricky because you have to put the link text in a span element in order to be able to achieve this.
Check the snippet below, a quick explanation:
What transform: skewX(20deg); does to .menu li a is basically tilt the link as you require. The problem there is that that tilts the entire element, text included. That's why you use a span inside your link and apply a counter tilt to that span using transform: skewX(-20deg);. It's basically resulting in a final 0 degree tilt. The rest of the styles I added just to simulate your requirements.
Also, it's important that the a elements use inline-block if you're not using float or block if you're using float, otherwise they are not affected by the tilt. Same applies to the inner span element.
It would look something like this:
.menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
background: #3d424a;
}
.menu li a {
color: #c3c5c7;
text-decoration: none;
display: inline-block;
transform: skewX(20deg);
font-family: Arial;
font-weight: bold;
text-transform: uppercase;
padding: 2rem;
transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}
.menu li a span {
transform: skewX(-20deg);
display: block;
}
.menu li a:hover {
background: #fda539;
color: #3d424a;
}
<ul class="menu">
<li>
<span>Home</span>
</li>
<li>
<span>About</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>

Answer 2

you can hover and create images. I added in the text to show you how to unskew the text as well so it doesn't get messed up on hovering.
.navigation {
transform: skew(20deg);
width: 100px;
height: 20px;
}
ul {
list-style-type: none;
}
ul li a {
display: block;
transform: skew(-20deg);
text-align: center;
}
li:hover {
background: orange;
}
<div class="col-md-7 col-sm-12">
<div class="nav-outer clearfix menu-bg">
<!--main-menu start-->
<nav class="main-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="hvr_link"><a class="hvr-link" href="#top">Home</a>
</li>
<li><a class="hvr-link" href="#service">Services</a>
</li>
<li class="dropdown"><a class="hvr-link" href="#">About</a>
<ul>
<li><a class="hvr-link" href="#aboutmy">About</a></li>
<li><a class="hvr-link" href="#teammy">Team</a></li>
</ul>
</li>
<li><a class="hvr-link" href="#portfoliomy">Portfolio</a>
</li>
<li><a class="hvr-link2" href="#propertymy">Properties</a>
</li>
<li><a class="hvr-link2" href="#contactmy">Contact</a></li>
</ul>
</div>
<div class="clearfix"></div>
</nav>
<!--main-menu end-->
</div>
</div>

Answer 3

#parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: red;
}
https://css-tricks.com/the-shapes-of-css/#parallelogram-shape