html - 用斜线分隔 2 个 div

Question

我想用斜线分隔 2 个 float 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/

我也试过了。使用 溢出:隐藏: http://jsfiddle.net/F6DgA/1/ (部分正确，但不是很干净的解决方案)

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

Answer 1

我个人会避免使用转换，而是使用边框属性。这对我来说似乎更清晰(并且也适用于 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);
}