如何使html div块看起来像切？里面的例子

Question

我必须使用看起来像这样的块创建一个页面：

我如何转换这些div块？块中的文本或其他内容应该是正常的，而不是像背景那样转换。

Answer 1

你可以使用伪元素，绝对位置然后使用transform属性来rotate DIV。我已通过示例更新了您在评论中链接到的jsFiddle：http://jsfiddle.net/2bZAW/3449/

div:after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: -25px;
    height: 100px;
    width: 110%;
    background-color: yellow;
    transform: rotate(-5deg);
}

Answer 2

您可以使用CSS3转换，并且为了防止内容出现转换，您可以将它们转换为与其父级相反的内容。

例如：

.outer{
    transform: skew(0deg, -5deg) ;
}
.inner{
    transform: skew(0deg, 5deg) ;
}

这是一个Working Example来证明这一点。

HTH， -Ted