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

问题描述

我想用纯色实现偏斜/旋转的背景div。

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 s。

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

你能帮我吗？

任何语言错误。

推荐答案

可以使用伪元素。

http://jsfiddle.net/JDcF3/

我改变颜色以使其可见。

I changed the colours to make visible

<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屋！