用斜率线分隔2个div

Question

我想用斜线分隔2个浮动div,它们有不同的背景颜色.

这里的例子:

HTML标记:

<div id="wrap">
    <div id="one"></div>
    <div id="two"></div>
</div>

我已经尝试过旋转它们(正如你在jsFiddle中看到的那样):

#wrap div {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    float:left;
    width:50%;
    height:200px;
}

http://jsfiddle.net/F6DgA/

我也试过smth.与overflow:hidden:http: //jsfiddle.net/F6DgA/1/(部分相关,但不是很干净的解决方案)

有没有更简单的方法(不要使用图像......)？

Answer 1

我个人会避免使用变换并使用 border 属性。这对我来说看起来更干净（并且也适用于 IE8）。

示例： http: //jsfiddle.net/F6DgA/5/

注意：为了确保 div 内的内容不会浮动在边缘顶部，请添加类似的内容* { box-sizing:border-box; }，然后向 div 添加左/右填充。

CSS：

#wrap {
    width:300px;
    height:100px;
    margin:0 auto;
    position:relative;
}

#wrap div {
    position:relative;
    height:100%;
    float:left;
}

#one {
    background:#333;
    width:calc(50% + 15px);
}

#one:after {
    content:"";
    position:absolute;
    right:0;
    border-right:30px solid black;
    border-top:100px solid transparent;
}

#two {
    background:#000;
    width:calc(50% - 15px);
}