我想用斜线分隔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;
}
我也试过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);
}
