CSS Rotate depending on width / fixed pixel value

TLDR: i want to achive this as scalable solution:

Longer explanation: Target is to have a rotated div with a gradient as background. But the problem is that the rotation cant be defined as deg because it varies depending on the browser-width. So the element should be 100% width of the browser with a fixed height on the left and a fixed lower height on the right side.

Basically this can be done easily with an image-background which stretches only horizontally. Only problem is that there should be also a pattern overlay which should be clipped on the same area and this should repeat and not stretch (as you can see these pattern consists of equal boxes)

So my idea was: Is it possible to rotate an element for specific target pixels?

Current Example:

.triangleClipper {
  height: 100px;
  overflow: hidden;
}

.designElement {
  background: linear-gradient(to right, #03cc65, #fbfe02); 
  height: 100px;
  width: 200%;
  transform-origin: top left;
  transform: rotate(-2deg);
  margin-top: -60px;
}

http://ift.tt/2zoXCtd You see the problem on the right edge when resizing the browser. So on width screens you see the end of the triangle and small screens it is too high. Target is to remain same heights on left and right edges on every browser size.

Any other ideas are welcome.