77

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

在此处输入图像描述

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

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

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

7 回答 7

145

skew父元素 ( LI) 并反向倾斜它的子元素

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

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>

于 2013-07-30T13:12:21.970 回答
10

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

尝试使用我曾经使用过的论点:before和:after来做到这一点。

https://jsfiddle.net/DTBAE/

于 2013-07-30T13:08:27.920 回答
6

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

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

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

于 2013-07-30T13:03:12.147 回答
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>

这是一个例子

于 2017-06-23T08:27:42.067 回答
2

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

于 2015-03-23T08:19:31.890 回答
0

注意：跨度不受变换 CSS 功能的影响，因此您需要一个 DIV 或更改跨度来显示：块；否则他们不会受到影响。

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

示例包装器 div 是：

 transform: skewx(35deg)

但文本 div 是：

transform: skewx(-35deg);

这是codepen：https ://codepen.io/dmitrisan/pen/NWaYEzV

于 2022-01-02T15:39:52.710 回答
0

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

您可以从此处生成您的剪辑并在您的代码中使用它。

这是一个工作小提琴供参考

于 2022-01-22T13:10:18.470 回答