独立2格与斜率线 [英] Separate 2 div's with slope line

问题描述

我要单独的2浮动DIV的一个斜坡线，他们得到了不同的背景颜色。

i want to seperate 2 floating div's with a slope line, they got different background colors.

例如，在这里：

HTML标记：

<div id="wrap">
    <div id="one"></div>
    <div id="two"></div>
</div>

我媒体链接试图旋转它们（如u可以在看的jsfiddle）：

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/

此外，我试过不便。与溢出：隐藏：
http://jsfiddle.net/F6DgA/1/ （部分corrent，但不是很干净的解决方案）

Also i tried smth. with overflow:hidden: http://jsfiddle.net/F6DgA/1/ (partly corrent, but not very clean solution)

有没有更简单的方法（不使用WANN的图像。）？

Is there a more easy way (dont wann use an image..)?

推荐答案

我个人避免使用变换和使用边框属性。这似乎更清洁，我（也工作在IE8）。

I would personally avoid using transforms and use the border property instead. This seems much cleaner to me (and also works in IE8).

例如： http://jsfiddle.net/F6DgA/5/

的注：为了确保的div里面的内容不浮动上的优势之上，添加类似 * {箱尺寸：边界盒; } ，然后填充左/右的div。的

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.

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格与斜率线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！