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

如何使一个段落适合偏斜的父div而不会出现偏斜值？

1 个答案: