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?

Thanks

Answer 1

You should use 20deg instead of 0deg on P to compensate for the DIV transform (since the result is the composition of transforms.)

Answer 2

In order to cancel the effect of the skew, you have to give positive value of transformation.

p {
   -webkit-transform: skew(20deg) !important;
   -moz-transform: skew(20deg) !important;
   -o-transform: skew(20deg) !important;
   transform: skew(20deg) !important;
}

Demo

Answer 3

div {
    width: 200px;
    height:50px;
        background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
    transform: skew(-20deg);
    margin: 20px;
    
    padding:0 25px;
}
p {
   -webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
    transform: skew(20deg) !important; 
}

<div>
<p>hey i'm straight, ok?</p>
</div>

hey i'm straight, ok?

Answer 4

I'm not sure if you can get it to skew back, seems to distort the font too much.

skew(20) is the closest i could get, but instead you could setup 2 divs, 1 for a skew box and another to then move over it.

http://jsfiddle.net/gP9ne/3/

Setup a fiddle there for you to see

Martyn

edit: actually doesnt look any different :p i think its just the black on red with the font doesnt like my screen :p

always over thinking!

Answer 5

As others have pointed out, reversing the skew of the <p> 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

<div>
  <p>hey i'm straight, ok?</p>
</div>

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.