How to Skew a Container While Keeping Its Text Unskewed?

How to Skew Element But Keep Text Normal (Unskewed)

Creating a Skewed Button with Unskewed Text

To create a skewed element with un-skewed text, you can apply a transformation to both the parent and child elements:

Skewing the Parent Element:

Use the transform: skew() property to skew the parent element (in this case, the

element).

Un-Skewing the Child Element:

Apply an opposite transform to the child element (the element) using transform: skew(-angle), where angle is the same value as applied to the parent element. This will un-skew the text.

Example Code:

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

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Result:

This will create a menu with skewed buttons but un-skewed text, allowing for an angled effect without distorting the readability of the links.

The above is the detailed content of How to Skew a Container While Keeping Its Text Unskewed?. For more information, please follow other related articles on the PHP Chinese website!