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

73

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

在此处输入图片说明

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

我不知道该怎么做，我只有。

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

css css-shapes

— 普雷斯顿
source

134

skew父元素（LI）并反向倾斜为子元素

CSS菜单倾斜的按钮对角线边框

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>

展开摘要

— 罗科·C·布尔扬
source

是的...而且也感谢我重新提出我的问题..我不记得那个skew名字了.. :)

— 普雷斯顿2013年

这：display:inline-block;不工作IE8或更少...所以我把一些*float:left;黑客，以使IE上的“内联”。但是，当我将鼠标悬停在菜单上时（在IE8上），我无法设置一些正常的背景（没有偏斜）。有小费吗？

— 2013年

@Preston当然，使用图像并帮助我们杀死IE8

— Roko C. Buljan

只有在您嵌套了元素的情况下，这才起作用，我只想影响文本。

— JackHasaKeyboard '16

1

@JackHasaKeyboard您不能；因此，将您的文本包装成a<span>并执行相同操作。

— Roko C. Buljan

10

这是我在几分钟内创建的，可在不同浏览器上使用的小提琴。

尝试与论据打，我用:before和:after来做到这一点。

https://jsfiddle.net/DTBAE/

— 杜迪
source

您有机会解释一下吗？我有点在为它做什么损失，想了解一点:before和:after

— 唐·

我也应该使用transform方法，但这具有更好的浏览器支持！

— thgaskell

虽然这几乎是Xbrowser（：after，：before），但您只能得到45°的角度

— Roko C. Buljan

您可以调整边框宽度以更改斜率。jsfiddle.net/DTBAE/1

— thgaskell

6

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

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

从您所说的来看，我相信这就是您想要的，否则请澄清该项目何时显示背景。

— 唐
source

3

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

展开摘要

这是一个例子

— 潜伏
source

2

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

— 塔贝特·贾马尔（Thabet Jmal）
source