CSS Rotate depending on width / fixed pixel value - css

Question

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;
}
https://jsfiddle.net/0egg320q/
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.

Answer 1

You may use clip-path with percentage. Like this you will always have your fixed heights, then you may simply rotate the linear gradient as you need :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100px;
width: 100%;
-webkit-clip-path: polygon(120% 0, 0 0, 0 100%);
clip-path: polygon(120% 0, 0 0, 0 100%);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>
You only need to pay attention as this property it not supported by all browser.
Another solution using pseudo element, but in this case you will have the bottom part colored and not transparent :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100%;
width: 100%;
position:relative;
overflow:hidden;
}
.designElement:after {
content: "";
position: absolute;
border-right: 120vw solid #fff;
border-bottom: 100px solid #fff;
border-top: 100px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangleClipper">
<div class="designElement"></div>
</div>
UPDATE
Another good solution using skew transformation and some % properties. This solution will not make the heights fixed but it will make the ratio of the two height fixed. It can be interesting one too.
body {
background: #ccc;
}
.triangleClipper {
width: 100%;
overflow: hidden;
padding-top: 30%;
}
.designElement {
background: linear-gradient(to right, #03cc65, #fbfe02);
padding-top: 100%;
margin-top: -120%;
width: 100%;
transform: skewY(-7deg);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>

Answer 2

After searching for a cross-browser way for clip-path (especially IE) i found out that using an SVG is the best solution for that.
Sadly an SVG dont support percentage values for polygons so i could only fix this via adding JavaScript and correcting the values live depending on browser size.
(In basic the SVG works for scaling the object, JS is only there for correcting the pattern-image-output.)
$(function() {
//svg der fensterbreite anpassen
var fullWidth = $('.styleElementTop').width();
console.log(fullWidth);
$('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100');
$('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
$('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
});
body {
padding: 0px;
margin: 0px;
}
.styleElementTop {
height: 100px;
width: 100%;
}
#gradientFill {
fill: url(#mainGradient);
}
#patternFill {
fill: url(#mainPattern);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styleElementTop">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none">
<defs>
<linearGradient id="mainGradient">
<stop stop-color="#03cc65" offset="0%" />
<stop stop-color="#fbfe02" offset="100%" />
</linearGradient>
<pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" />
</pattern>
</defs>
<polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon>
<polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon>
</svg>
</div>