Separate 2 div's with slope line - html

Question

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

Answer 1

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

Answer 2

Use CSS gradient for the #wrap div, check here for an example.
Something like this:
background: #9dd53a;
background: -moz-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
background: -webkit-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: -o-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: -ms-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
background: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );

Answer 3

Whatever the height and width having your parent div you have to double height of your child element. After that give position:absolute to your child elements. Give -50% left position to your first child div and give -50% right position to your second child div
CSS Will be like following:
#wrap {
width:400px;
margin:0 auto;
position:relative;
height:300px;
overflow:hidden;
}
#wrap div {
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
float:left;
width:100%;
height:600px;
top:-50%;
position:absolute;
}
#wrap div#one { left:-50%; }
#wrap div#two { right:-50%; }
#one {
background:#333;
}
#two {
background:#000;
}
Please check this Working URL

Answer 4

Demo
css
#one {
border-top: 200px solid gray;
border-right: 100px solid transparent;
height: 0;
width: 30%;
float:left
}
#two {
border-bottom: 200px solid black;
border-left: 100px solid transparent;
height: 0;
width: 30%;
float:left;
margin-left:-100px;
}
#wrap {
width:400px;
margin:0 auto;
}

Answer 5

you can use pseudo element :after or :before
CODEPEN
<div class="rect"></div>
.rect {
background:#000;
height: 50px;
width: 150px;
position: relative;
overflow: hidden;
}
.rect:after {
content: "";
background:#333;
height: 100px;
width: 300px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display: block;
position: absolute;
top:-7px;
right: 10px;
}

Answer 6

Reference this css Shape examples !
This is what I've tried . Demo here !
It's not correctly the same with your need .
But I think , you can approach your need by a little modification !
html
<div Id="parallelogram"></div>
<div Id="parallelogram2"></div>
css
#parallelogram {
width: 130px;
height: 75px;
background: pink;
position:absolute;
overflow:hidden;
/* Skew */
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
#parallelogram2 {
width: 130px;
height: 75px;
margin-left:100px;
background: Black;
position:absolute;
overflow:hidden;
/* Skew */
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}