How to make a paragraph fit inside a skewed parent div without getting skewing value?

Question

I'm trying to create this using HTML/CSS... http://postimg.org/image/uhmhf04qz/

Now, Initially I tried..

    <div class='box'>
    <p>paragraph here</p>
    </div>

css:

    .box {
    background: red;
    width: 400px;
    height: 800px;
    margin: auto;
    transform: skewX(-20deg);
    }

But that also applies skew to the child paragraph, Which makes it look pretty deformed, I'm trying to make the paragraph fit in the boundaries of the parent div but without being skewed too, Is there a way to do that in HTML/CSS?

See this answer I wrote a few days ago - http://stackoverflow.com/questions/19147241/skewed-borders-on-a-div/19147455#19147455 .. It is semi-responsive, and works relevantly well.. — Josh Crozier, Oct 04 '13 at 22:18

benny · Answer 1 · 2013-10-04T22:35:53.767

0

Compensate with a negative value for the positive value within the p element.

Jsfiddle: http://jsfiddle.net/u4NtT/4/

<div id='shape'>
    <p>paragraph here</p>
</div>

#shape {
    width: 450px;
    height: 350px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(2d0eg);
    background: #333;
    margin:100px;
}
#shape p {
    font:1em normal Futura, sans-serif;
    color:#f1f1f1;
    padding:60px 60px;
    -webkit-transform: skew(-20deg) !important;
    -moz-transform: skew(-20deg) !important;
    -o-transform: skew(-20deg) !important;
    transform: skew(-20deg) !important;
}

edited Oct 04 '13 at 22:35

answered Oct 04 '13 at 22:27

benny

454
2
7
16

I would avoid the !important in your css at all costs. Btw, try to make the content longer and you'll see the paragraph doesn't notice the bounderies of the srewed div. – nkmol Oct 04 '13 at 22:29
@blake yeah, but this makes the text escape the parent div boundaries. – Magdi Gamal Oct 04 '13 at 22:33
You can adjust that with padding. – benny Oct 04 '13 at 22:36
Here's a much larger shape with a large body of paragraph text.http://jsfiddle.net/u4NtT/5/ – benny Oct 04 '13 at 22:38

How to make a paragraph fit inside a skewed parent div without getting skewing value?

1 Answers1