如何在保持文字不傾斜的同時傾斜容器？

如何傾斜元素但保持文字正常（不傾斜）

建立具有不傾斜文字的傾斜按鈕

建立具有未傾斜文字的傾斜元素，您可以對父級和子級應用轉換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中文網其他相關文章！