如何扭曲元素但保持文本正常（未弯曲）

Question

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

我想将此应用到我的菜单中，因此棕色背景会显示在hover实例

上

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

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

Answer 1

skew父元素（LI）和反向倾斜它的子元素

nav li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* INVERSE SKEW */
  color: #0bf;
}
nav li.active,
nav li:hover{
  background:#000;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

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

尝试使用参数，我使用:before和:after来执行此操作。

https://jsfiddle.net/DTBAE/

Answer 3

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

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

根据你的说法，我相信这就是你想要的，如果不是，请在项目显示背景时澄清。

Answer 4

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

Answer 5

.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