0

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!

Fabian Alejandro Andrés
  • 3
  • 1
  • You'll have to put an absolute positioned element behind the rest and skew that element. – arieljuod Jul 20 '20 at 03:26
  • Does this answer your question? [How to use skew only in the parent element?](https://stackoverflow.com/questions/13027357/how-to-use-skew-only-in-the-parent-element) – 95faf8e76605e973 Jul 22 '20 at 02:51

1 Answers1

0

You can negate the skewing on the child element

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

Reposition them afterwards as necessary.

95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
  • This works, but any text in the "unskewed" elements looks just a little different - like the aliasing has changed, losing a touch of sharpness in the process – Cocowalla Dec 19 '21 at 21:52