如何使用 CSS 傾斜元素的背景，同時保持其文字水平對齊？

在保留文字對齊方式的同時創建傾斜元素

在 CSS 領域，實現某些視覺效果需要創新思維。其中一種效果是創建傾斜的元素，而不扭曲它們所包含的文字。

想像一下，您想要複製下面的圖像，當您將滑鼠懸停在選單項目上時，棕色背景會出現對角線：

[帶有白色文字的傾斜棕色選單項目的圖像]

要實現此目的，您可以結合使用傾斜和逆傾斜。關鍵在於將 skew() 應用於父元素（在本例中為 li），並將 skew(-deg) 應用於其子元素（錨標記 a）。這可以消除傾斜，確保背景傾斜時文字保持水平。

以下是相關CSS：

nav li {
  transform: skew(20deg);
}

nav li a {
  transform: skew(-20deg);
}

此外，您可以添加懸停狀態來更改背景顏色以及當用戶將滑鼠懸停在選單項目上時的文字顏色：

nav li:hover {
  background: #1a0000;
  color: #fff;
}

透過結合這些CSS 技術，您可以創建具有視覺吸引力的內容傾斜的元素，同時保持正確的文字對齊。

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