CSS：有没有办法在特定 div 上使用变换倾斜 属性 而不影响子元素？

CSS: Is there a way to use the transform skew property on a specific div without affecting child elements?

我正在尝试在 div 上使用 transform: skewX 属性 但它也会使导航中的文本倾斜。有没有一种方法可以应用转换：skewX 属性 而不会影响里面的文本？

HTML:

<div class="nav" id="skew-left"><p>Test  /  About Me  /  Portfolios  /  Contact Me</p></div>

CSS:

.nav {
  background-color: #154360;
  height: 65px;
  left: 0px;
  padding: 15px 0px 0px 550px;
  position: fixed;
  top: 0px;
  width:100%;
}

#skew-left {
    transform: skewX(45deg);
}

谢谢！

您可以取消子元素上的倾斜

#skew-left p {
    transform: skewX(-45deg);
}

之后根据需要重新放置它们。