用斜线分隔2个div [英] Separate 2 div's with slope line
问题描述
例如:
b
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。 overflow:hidden
:
http:/ /jsfiddle.net/F6DgA/1/ (部分原因,但不是很干净的解决方案)
我本人避免使用transforms并使用border属性。这似乎对我来说更干净(也在IE8中工作)。
示例: http://jsfiddle.net/F6DgA/5/
注意:为了确保divs中的内容浮动在边缘的顶部,添加 * {box-sizing:border-box; }
CSS:
$ b $ b
#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);
}
i want to seperate 2 floating div's with a slope line, they got different background colors.
Example here:
HTML markup:
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
i allready tried to rotate them (as u can see in the 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;
}
Also i tried smth. with overflow:hidden
:
http://jsfiddle.net/F6DgA/1/ (partly corrent, but not very clean solution)
Is there a more easy way (dont wann use an image..)?
I would personally avoid using transforms and use the border property instead. This seems much cleaner to me (and also works in IE8).
Example: http://jsfiddle.net/F6DgA/5/
Note: To make sure the content inside the divs doesn't float on top of the edge, add something like * { box-sizing:border-box; }
and then a padding left/right to the divs.
The 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);
}
这篇关于用斜线分隔2个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!