How to skew element but keep text normal (unskewed)
CssCss ShapesCss Problem Overview
Is it possible to reproduce this image using only CSS?
I want to apply this to my menu, so the brown background appears on hover
instance
I don't know how to do this, I only have;
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
Css Solutions
Solution 1 - Css
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 - Css
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.
Solution 3 - Css
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;
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 - Css
.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
Solution 5 - Css
To have IE support just add -ms-transform: skew(20deg, 0deg);
beside all the other transform: skew(20deg, 0deg);
s.
Solution 6 - Css
NOTE: SPAN is NOT affected by transform CSS functionality, so you will need a DIV or change span to display: block; otherwise they will NOT be affected.
So just put the TEXT inside a separate div and unskew it.
example wrapper div is:
transform: skewx(35deg)
but text div is:
transform: skewx(-35deg);
here is codepen: https://codepen.io/dmitrisan/pen/NWaYEzV
Solution 7 - Css
You can use clip-path
to make results like these.
For example:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
ul {
display: flex;
width: 100%;
flex-direction: row;
gap: 20px;
background: #000;
padding: 0 10px;
justify-content: flex-end;
}
li {
list-style-type: none;
clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0% 100%);
background: blue;
padding: 10px 50px;
}
a {
color: #fff;
}
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
</ul>
You can generate your clip from here and use it in your code.
Here is a working Fiddle for reference