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

总结

以上是内存溢出为你收集整理的html – 用斜率线分隔2个div全部内容，希望文章能够帮你解决html – 用斜率线分隔2个div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。