Divide 2 divs on the slope line

Question

I want to separate 2 floating divs with a slope line, they got different background colors.

An example is here:

HTML markup:

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

i all have already tried to rotate them (as you can see in 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/

I also tried smth. with overflow:hidden : http://jsfiddle.net/F6DgA/1/ ( partially corrent but not very clean solution )

Is there an easier way (not to use a wann image ...)?

Answer 1

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

Example: http://jsfiddle.net/F6DgA/5/

Note. To prevent the content inside the divs from floating over the edge, add something like * { box-sizing:border-box; } * { box-sizing:border-box; } and then add left / right 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); } 

Answer 2

Use the CSS gradient for the #wrap div, here to see an example .

Something like that:

 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 of your parent div, you need to double the height of your child. After that, give position:absolute your children. Give -50% of the left position to your first child div and give -50% of the right position to your second child div

CSS will look like this:

 #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 the: after or: before pseudo-element

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

Link to css Examples of forms !

This is what I tried. Demo is here !
This is not so accurate with your need.
But I think you can get closer to your needs with 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); }