Looking to create a diagonal background for an element in a responsive website. While I can achieve this easily using a gradient, the challenge arises when trying to make the element fluid.
Here's an example of how it can be done with fixed dimensions:
div {
width:200px;
height:200px;
margin-bottom:2em;
border:1px solid #aaa;
background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
}
This approach uses a rotated gradient with fixed width. However, attempting this with percentage-based width breaks the concept. You can see the issue demonstrated in this CodePen: http://codepen.io/juicypixels/pen/gPravL?editors=110
I'm curious if there's a responsive solution for achieving a diagonal background, perhaps even involving javascript.
Thank you in advance.