CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Christian
Christian

Reputation: 3988

Responsive diagonal line in CSS/HTML

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.

enter image description here

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.

Upvotes: 1

Views: 4063

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85613

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

Upvotes: 1

Related Questions