如何倾斜元素但保持文本正常（未倾斜）答案

【问题标题】：How to skew element but keep text normal (unskewed)如何倾斜元素但保持文本正常（未倾斜）
【发布时间】：2013-07-30 15:09:49
【问题描述】：

是否可以仅使用 CSS 重现此图像？

我想将它应用到我的菜单，所以棕色背景出现在 hover 实例上

我不知道怎么做，我只有；

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}

【问题讨论】：

标签： css css-shapes

【解决方案1】：

您可以使用clip-path 来生成这样的结果。例如：

* {
  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>

您可以从这里generate your clip 并在您的代码中使用它。

这是一个有效的Fiddle for reference

【讨论】：

【解决方案2】：

skew 一个父元素 (LI) 和 inverse skew 它是子元素

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>

【讨论】：

是的......也感谢我的问题重新表述......我不记得那个skew名字...... :)
this:display:inline-block; 在 IE8 或更低版本中无法使用...所以我在 IE 上添加了一些 *float:left; hack 以使其“内联”。但是当我将鼠标悬停在菜单上时，（在 IE8 上）我无法设置一些正常的背景（没有倾斜）。有什么建议吗？
@Preston 当然，使用图像并帮助我们杀死 IE8
只有当你有一个嵌套在里面的元素时才有效，我只想影响文本。
@JackHasaKeyboard 你不能；所以将你的文本包装成<span> 并做同样的事情。

【解决方案3】：

注意：SPAN 不受变换 CSS 功能的影响，因此您需要一个 DIV 或更改 span 才能显示：block;否则不会受到影响。

所以只需将 TEXT 放在一个单独的 div 中并取消倾斜。

示例包装器 div 是：

 transform: skewx(35deg)

但文本 div 是：

transform: skewx(-35deg);

这里是代码笔：https://codepen.io/dmitrisan/pen/NWaYEzV

【讨论】：

【解决方案4】：

要获得 IE 支持，只需在所有其他 transform: skew(20deg, 0deg);s 旁边添加 -ms-transform: skew(20deg, 0deg);。

【讨论】：

【解决方案5】：

这是一个跨不同浏览器使用的小提琴 - 我在几分钟内创建。

尝试使用参数，我使用 :before 和 :after 来做到这一点。

https://jsfiddle.net/DTBAE/

【讨论】：

你能解释一下吗？我有点不知所措，想了解一下 :before 和 :after
我也会选择 transform 方法，但这有更好的浏览器支持！
虽然这几乎是 Xbrowser (:after, :before) 你只能得到 45° 的角度
您可以调整边框宽度来改变斜率。 jsfiddle.net/DTBAE/1

【解决方案6】：

您可以使用transform: skew(X, Y) 属性来实现此目的。创建一个倾斜的外部容器，然后在内部容器上倾斜相反的量以将文本倾斜回笔直。例如看这个小提琴；

http://jsfiddle.net/UZ6HL/4/

根据您的说法，我相信这就是您想要的，如果不是，请说明该项目何时应显示背景。

【讨论】：

【解决方案7】：

.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>

这里是an example

【讨论】：