This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew
completely and give your .box p
selector font-style: italic
:
.box p {
font-style: italic;
}
If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew
on that:
<article>
<p>...</p>
</article>
.box article {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
Now simply counter that skew on your p
element by skewing the same amount in the opposite direction:
.box article p {
font-style: italic;
transform: skew(20deg);
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* Firefox */
-webkit-transform: skew(20deg); /* Safari and Chrome */
-o-transform: skew(20deg); /* Opera */
}
Here I've again added font-style: italic
to make the text render italic.