如何倾斜元素但保持文本正常（不倾斜）

Question

是否可能仅使用CSS来复制此图像？

我想将其应用于我的菜单，因此在hover实例上出现棕色背景。

我不知道该如何做到这一点，我只有：

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

- Preston

Answer 1

对父元素进行 skew（即倾斜）（在此示例中为 li），并 反向倾斜 其子元素：

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>

- Roko C. Buljan

---

是的...还要感谢您重新表述我的问题..我不记得那个“skew”的名字了.. :) - Preston

这个：display:inline-block;在IE8或更早版本中不起作用...所以我加了一些*float:left;的hack来让它在IE上“内联”。但是当我在菜单上悬停时（在IE8上），我无法设置一些正常的背景（没有倾斜）。有什么建议吗？ - Preston

@Preston 当然，使用图片帮助我们摆脱IE8。 - Roko C. Buljan

@JackHasaKeyboard 你不能这样做；所以将你的文本包装在一个<span>中并执行相同的操作。 - Roko C. Buljan

我无法矫正 span 子元素的偏斜。不得不使用 div 代替。可能与 display 属性有关，但不确定。 - Slion

Answer 2

这里提供一个可以在不同浏览器上使用的代码示例 - 我只用了几分钟时间就创建了它。

尝试调整参数，我使用了:before和:after来实现这个效果。

https://jsfiddle.net/DTBAE/

- udidu

---

有机会能给我解释一下吗？我不太清楚它在做什么，想学一下:before和:after。 - Don

我也会选择使用transform方法，但这个方法在浏览器支持方面更好！ - thgaskell

虽然这几乎是Xbrowser（：after，：before），但你只能得到45度的角度。 - Roko C. Buljan

您可以调整边框宽度来改变斜率。http://jsfiddle.net/DTBAE/1/ - thgaskell

Answer 3

您可以使用 transform: skew(X, Y) 属性来实现这一效果。创建一个倾斜的外部容器，然后在内部容器上相反的方向倾斜同样的角度以使文本保持水平。请参见此示例；http://jsfiddle.net/UZ6HL/4/ 从您所说的，我认为这就是您想要的效果，如果不是，请说明何时应该显示背景。

- Don

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

这里有一个示例，涉及到it技术。点击此处查看。

- lurk

Answer 5

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

- Thabet Jmal

Answer 6

您可以使用 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>

您可以从这里生成您的剪辑，并在您的代码中使用它。

这里有一个可供参考的工作Fiddle。

- Ahmad Habib

Answer 7

注意：SPAN 不受 transform CSS 功能的影响，因此您需要使用 DIV 或将 span 更改为 display: block; 否则它们将不受影响。

所以只需将文本放在单独的 div 中并取消倾斜即可。

示例包装器 div 如下：

 transform: skewx(35deg)

但文本 div 是：

transform: skewx(-35deg); 

这里是 CodePen: https://codepen.io/dmitrisan/pen/NWaYEzV

- fruitloaf