CSS 如何倾斜元素但保持文本正常（未倾斜）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17947565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to skew element but keep text normal (unskewed)
提问by Preston
Is it possible to reproduce this image using only CSS?
是否可以仅使用 CSS 重现此图像？
I want to apply this to my menu, so the brown background appears on hoverinstance
我想把它应用到我的菜单上，所以棕色背景出现在hover实例上
I don't know how to do this, I only have;
我不知道该怎么做，我只有；
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
回答by Roko C. Buljan
skewa parent element (LI) and inverse skewit's children elements
skew父元素 ( LI) 和它的子元素反向倾斜
nav ul {
padding: 0;
display: flex;
list-style: none;
}
nav li {
transition: background 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>回答by udidu
Here is a fiddle for use across different browsers - I created in a couple of minutes.
这是一个跨不同浏览器使用的小提琴 - 我在几分钟内创建了。
Try playing with the arguments, I used :beforeand :afterto do this.
尝试使用参数，我使用:before和:after来做到这一点。
回答by Don
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;
您可以使用该transform: skew(X, Y)属性来实现此目的。创建一个倾斜的外部容器，然后在内部容器上倾斜相反的量，将文本倾斜回直线。例如，请参阅此小提琴；
From what you have said, I believethis is what you want, if not please clarify when the item should display the background.
根据您所说的，我相信这就是您想要的，如果不是，请说明该项目应何时显示背景。
回答by Thabet Jmal
To have IE support just add -ms-transform: skew(20deg, 0deg);beside all the other transform: skew(20deg, 0deg);s.
要获得 IE 支持，只需-ms-transform: skew(20deg, 0deg);在所有其他transform: skew(20deg, 0deg);s旁边添加即可。
回答by lurk
.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
这是一个例子
