如何旋转CSS背景？ [英] How to rotate background in CSS?

问题描述

我想实现与纯色倾斜/旋转背景格。

I want to achieve a skewed/rotated background div with solid color.

就像这样：

我知道有带有旋转你的背景来创建倒角，但将它的工作在这里的把戏？或jQuery将做的更好？

I know there is a trick with rotating your background to create chamfered corners but will it work out here? Or jQuery will do better?

问题二，我可能有这个覆盖是两个背景内容层（标记为红色） DIV 秒。

Second problem I might have with this is a content layer (marked as red) overlaying the two background divs.

你能帮助我吗？

在此先感谢和抱歉任何语言错误。

Thanks in advance, and sorry for any language mistakes.

推荐答案

您可以用伪元素做到这一点。

You can do this with pseudo elements.

http://jsfiddle.net/JDcF3/

我改变了颜色，使可见

<div class="foo"></div>

.foo {
    position: relative;
    width: 200px;
    height: 100px;
    background: blue;
}

.foo:after {
    content: '';
    display:block;
    height:100px;
    width: 100px;
   -webkit-transform: skew(30deg, 0deg);
    background: red;
    left: 150px;
    position:absolute;
    z-index: -1;
}

这篇关于如何旋转CSS背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！