CSS / HTML中的响应性对角线

Question

What I'm trying to achieve is to have a diagonal line go from a bottom border, to a top border, behind a nav box and have two different background colours on each side of the diagonal.

And, to top it off, it needs to be responsive.

Hopefully this makes sense, if it doesn't, heres an image.

In the image, the bottom-left diagonal comes out too far, it would end in line with the left nav box element, so could use the location of each of the corners as anchors.

More than happy to use whatever method is proposed.

Thanks!

EDIT I can make a parallelogram in css pretty easy but it is not responsive.

#parallelogram {
    width: 700px;
    height: 200px;
    -webkit-transform: skew(-40deg);
    background: red;
    margin-left: 100px;
}

http://jsfiddle.net/cbiggins/fVeDD/

EDIT 2 Updated fiddle, now calculating angle and applying change on resize. Note this only works on Chrome (and Safari?) atm.

http://jsfiddle.net/cbiggins/fVeDD/5/

We might be leaving it now though, I'm not sure how feasible this is now with the time constraints we have in our current project.

Answer 1

You can use css3 transformation something like below:

.border_div{
  width: 200px; // you may also need to apply position absolute
  height: 2px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}