Separate 2 div's with slope line

background, css, css-shapes, html

Solution

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

Problem

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..)?

Original source