如何倾斜元素，但保持文本正常(不倾斜)

是否可以只用 CSS 复制这个图像？

enter image description here

我想把这个应用到我的菜单，所以棕色的背景出现在 hover实例

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

.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
88195 次浏览
小开

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

Http://jsfiddle.net/uz6hl/4/

从你所说的，我 相信这是你想要的，如果不请澄清的项目时，应该显示背景。

小开

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

试着玩一下参数，我用 :before和 :after来做这个。

Https://jsfiddle.net/dtbae/

小开
最佳答案

skew是一个父元素(本例中是 li) ，反向倾斜反向倾斜是它的子元素:

CSS Menu skewed buttons diagonal borders

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>

小开

要支持 IE，只需在所有其他 transform: skew(20deg, 0deg);之外添加 -ms-transform: skew(20deg, 0deg);即可。

小开 

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

这是 一个例子

小开

注意: 转换 CSS 功能不会影响 SPAN，因此需要一个 DIV 或者更改 SPAN 来显示: block; 否则它们不会受到影响。

因此，只需将文本放在一个单独的 div 中，并取消它的倾斜。

示例包装器 div 是:

 transform: skewx(35deg)

但是文本 div 是:

transform: skewx(-35deg);

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

小开

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

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

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


提交答案