如何在保持文本不倾斜的同时倾斜容器？

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

创建具有不倾斜文本的倾斜按钮

创建具有未倾斜文本的倾斜元素，您可以对父级和子级应用转换elements:

倾斜父元素：

使用 Transform: skew() 属性倾斜父元素（在本例中为

元素） .

不歪曲孩子元素：

使用 Transform: skew(-angle) 对子元素（ 元素）应用相反的变换，其中角度与应用于父元素的值相同。这将消除文本的倾斜。

示例代码：

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;
}

HTML：

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

结果：

这将创建带有倾斜按钮但未倾斜文本的菜单，允许在不扭曲链接可读性的情况下产生倾斜效果。

以上是如何在保持文本不倾斜的同时倾斜容器？的详细内容。更多信息请关注PHP中文网其他相关文章！