用斜线分隔2个div [英] Separate 2 div's with slope line

查看:782
本文介绍了用斜线分隔2个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



例如:












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

http://jsfiddle.net/F6DgA/



我也尝试过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;
}

http://jsfiddle.net/F6DgA/

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆