Nabin Nepal (Starx) css
April 22, 2012

Reset angle of text in skewed div using CSS

Question by benhowdle89

benhowdle89benhowdle89

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 by Alexander Pavlov

Alexander PavlovAlexander Pavlov

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

Answer by Starx

StarxStarx

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!