CSS Transform and Skew


So, I was recently tasked with making buttons and menu links with the angled backgrounds or skewed on the 2D plane.  Example below where top button is a menu button ul > li > a –current-item and the bottom button is a call to action button.

Of course, making button graphics would have been easy, but not maintainable because as we all know menus change and content “Call to Action” buttons change more frequently.  So, I decided to explore a CSS option and as it turned out, it was way more difficult than anticipated.  I immediately found the CSS skew() function and it worked great for skewing the button to the -18 degree angle that I needed with transform: skewX(-18deg);.  However, it also skewed the text.  No worries, right?  I can just un-skew the text with the opposite transform: skewX(18deg);  This is where I got stuck.  I tried several different things and couldn’t get it to work.  Well, I couldn’t get it to work for the “Call to Action” buttons and that was where I was totally confused.  It was working for my menu items, just not for the buttons within the content.

So, I assumed it had to do with something like using skew() on div containers or li elements works but you can’t use it on text.  Well, I was sort of correct.  As it turns out, it is just that it doesn’t work on inline elements.  It only works on block or inline-block elements.

So, skewing the parent div and then putting a display: inline-block on the text allowed me to un-skew it to get the desired result.

.w-button {
  padding: 10px 0;
  transform: skewX(-18deg);
}

.skew-text {
  color: #000;
  display: inline-block;
  transform: skewX(18deg);
}

and

.w-button {
  padding: 10px 0;
  transform: skewX(-18deg);
}

.skew-text {
  color: #000;
  display: inline-block;
  transform: skewX(18deg);
}