How to skew element but keep text normal (unskewed)
Solution 1:
skew a parent element (LI) and inverse skew it's children elements
nav ul {
padding: 0;
display: flex;
list-style: none;
}
nav li {
transition: background 0.3s, color 0.3s;
transform: skew(20deg); /* SKEW */
}
nav li a {
display: block; /* block or inline-block is needed */
text-decoration: none;
padding: 5px 10px;
font: 30px/1 sans-serif;
transform: skew(-20deg); /* UNSKEW */
color: inherit;
}
nav li.active,
nav li:hover {
background: #000;
color: #fff;
}<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Solution 2:
Here is a fiddle for use across different browsers - I created in a couple of minutes.
Try playing with the arguments, I used :before and :after to do this.
https://jsfiddle.net/DTBAE/
Solution 3:
You can use the transform: skew(X, Y) property to achieve this. Creating a skewed outer container, then skew the opposite amount on an inner container to skew the text back to being straight. See this fiddle for example;
http://jsfiddle.net/UZ6HL/4/
From what you have said, I believe this is what you want, if not please clarify when the item should display the background.
Solution 4:
.skew {
background: green;
color: #fff;
padding: 50px;
transform: skewX(-7deg);
font-size: 20px;
font-weight: 700;
}
.skew p {
transform: skewX(7deg);
}<div class="skew">
<p>This is caption</p>
</div>Here's an example