html - 如何使段落适合倾斜的父 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;
}