Search code examples
csstransformtransformationcss-transformsskew

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

I'm trying to use the transform: skewX property on a div but it also skews the text inside the navigation. Is there a way to apply the transform: skewX property without also affecting the text inside?

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

Thank you!

Solution

  • You can negate the skewing on the child element

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

    Reposition them afterwards as necessary.