Is it possible to skew a navigation bar without affecting the text inside it?
I tried skewing the main div of the navigation bar and using a negative skew value on the text, but it didn't work as expected.
How can I achieve this effect successfully?
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox
{
clear: both;
display: block;
width: 80vw;
height: 3.5vw;
margin: auto;
padding: 0.5vw 0 0 0;
}
#navbar, #navbar ul
{
width: 70vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
}
#navbar span
{
height: 3.5vw;
transform: skewX(15deg); /*This is supposed to un-skew, but doesn't work!*/
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 0.8vw 3vw 0 3vw;
text-align: center;
color: red;
font-size: 2vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
background-color: green;
}<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<a href="default.html"><li style="background-color: purple;"><span>Home</span></li></a>
<a href="servers.html"><li id="server"><span>Servers</span></li></a>
<a href="community.html"><li id="community"><span>Community</span></li></a>
<a href="store.html"><li id="store"><span>Store</span></li></a>
<a href="downloads.html"><li id="downloads"><span>Downloads</span></li></a>
<a href="contact.html"><li id="contact"><span>Contact</span></li></a>
</ul>
</div>
</body>