如何使一個段落適合一個傾斜的父div沒有得到歪斜值？

Question

我試圖創建這個使用HTML/CSS ... http://postimg.org/image/uhmhf04qz/

現在，起初我試過..

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

CSS：

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

但是，這也適用歪斜到孩子的段落，這使得它看起來非常變形，我試圖讓段落適合父div的邊界，但也沒有偏斜，有沒有辦法在HTML/CSS中做到這一點？

Answer 1

用p元素中的正值補償負值。

的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; 
}