html – 用斜率线分隔2个div

我想用斜线分隔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.溢出：隐藏：
http://jsfiddle.net/F6DgA/1/(部分相关,但不是很干净的解决方案)

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

解决方法

我个人会避免使用转换并使用border属性.这对我来说似乎更清洁(也适用于IE8).

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

注意：要确保div内的内容不浮动在边缘上,请添加类似* {Box-sizing：border-Box;然后向div / left左/右填充.

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);
}