Search code examples
csstransformcss-transformsskew

Transform - Skew anchor tag background only

Without changing the HTML, how can I make the text straight while keeping skew on the background only?

https://jsfiddle.net/z4ms6k07/1/

.btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  transform: skewX(59deg);
}
<div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>

Solution

  • You can skew the text back. Since transform doesn't work on non block elements, and a is an inline tag, you need to change the a tag display to inline-block or block:

    .btn {
  transform: skewX(-59deg);
  background-color: yellow;
}

.btn a {
  display: inline-block;
  transform: skewX(59deg);
}
    <div class="wrapper">
  <div class="btn btn-one">
    <a href="#">BTN ONE</a>
  </div>
  <div class="btn btn-two">
    <a href="#">BTN TWO</a>
  </div>
</div>