如何在保持文字完美對齊的同時傾斜 CSS 元素？

使用保留的文字對齊方式傾斜元素

在 CSS 中，可以在保持文字對齊的同時傾斜元素。此技術在建立具有對角線邊框的選單按鈕時特別有用，如下圖所示。

要達到此效果，請依照下列步驟操作：

1. 傾斜父級元素：套用變換：skew()；到父元素（例如本例中的li）以將其傾斜特定角度。
2. 反向傾斜子元素：應用變換：skew(-angle);到子元素（例如本例中的 a）以反轉傾斜並恢復文字對齊方式。

以下是範例程式碼：

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

此程式碼建立一個選單帶有傾斜的按鈕和對角邊框。將滑鼠停留在按鈕上時，按鈕會變為黑色，文字顏色會變為白色，並展示反向傾斜效果。

透過了解此技術，您可以創建具有對角邊框的視覺上吸引人的選單元素，並保持完美的文字對齊。

以上是如何在保持文字完美對齊的同時傾斜 CSS 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！