Reset angle of text in skewed div using CSS

Question

I have made a fiddle:

http://jsfiddle.net/89x4d/

I\'m trying to maintain the skewed div but keep the p text straight.

Is this possible?

Thank

Answer 1

As others have pointed out, reversing the skew of the

can lead to some undesirable results.

It's also not super reusable in that for every new skew angle you would need a corresponding CSS selector/declaration to reverse the internal content.

As an alternative, use the :before selector to add the skewed element behind the text.

HTML

  
hey i'm straight, ok?

CSS

div {
  width: 200px;
  height:50px;
  margin: 20px;
  position:relative;
}

div:before {
  content: "";
  display:block;
  background: red;
  position:absolute;
  width:100%;
  height:100%;
  z-index:-1;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

And a demo.