创建一个有角度的div

Question

假设我有一个内部有两个div的容器div。这是我想要得到的效果：

<div>
  <div></div>
  <div></div>
</div>

另外，我需要它以％或视口单位作为响应，宽度和高度。我需要用各种内容填充它们，有些内容甚至可能部分隐藏在其中一个div中。

Answer 1

不幸的是，CSS并不是那么高级：影响子元素的倾斜...我确定你要找的是内容将以你在那里创建的角度包裹...我同意唯一的方法是正如@ user5151179指出的那样，使用2D变换...只需检查浏览器与此的兼容性（对于所有浏览器都没有简单的解决方案，如你所知）。

我认为最简单的方法是将背景图像添加到外部div，并且有两个矩形div，您可以在外部div中添加内容等，因此您的文本不会以某个角度包裹，如果是有道理。

Answer 2

尝试以下

<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>

<style>
.container{
    height:50px;
    width:100px;
    position:relative;
    overflow: hidden;
}
.div1 {
    background: none repeat scroll 0 0 #0000FF;
    left: -8px;
}
.div2 {
    background: none repeat scroll 0 0 #000000;
    right: -7px;
}
.div{
    width: 57px;
    top: -10px;
    transform: rotate(20deg);
    position: absolute;
    height: 72px;
}

没有css方法可以做到这一点。但我们可以通过一些css技巧来实现，就像我上面所做的那样。