Separate 2 div's with slope line

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