Elements hidden by clip-path still add to page length - html

Question

I'm attempting an HTML page that has a diagonal border down the right-hand side. Well, in fact it has a semi-transparent border next to a solid border (to echo some design elements on other pages). The way I've created this line is by having two slightly rotated rectangles, one in the :before and one in the :after pseudo elements.
#header_block_unlimited:before {
content: '';
position: absolute;
width: 50%;
height: 130%;
right: -38.5%;
top: -10%;
bottom: -10%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
}
#header_block_unlimited:after {
content: '';
position: absolute;
width: 50%;
height: 130%;
right: -40%;
top: -10%;
bottom: -10%;
background-color: #F95E62;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
}
I suppose I could use an SVG shape, but I'm thinking this will take too long to fine-tune, especially since the page length needs to be dynamic (should be able to range between 400 pixels and about 1500 pixels).
I have attempted to use overflow-y:hidden but this produces a scroll bar on the x-axis, partly because the design also needs to use full-browser-width bars (see https://css-tricks.com/full-browser-width-bars/)
Clip-path to the rescue! Well, unfortunately not quite. Clip-path crops off the bits at the bottom of the rectangle I don't need, but unfortunately still counts those bits to the length of the page, meaning there is a gap beneath my footer.
Here's the clip-path code that's assigned to the parent container...
clip-path: inset( -100vw -100vw 0 -100vw);
Here's a codepen of the problem.
Any help with this would be much appreciated. An ideal solution would be some way of cropping the excess of the rotated rectangles so that it doesn't add to the page length. Alternatively, some other way of achieving the diagonal RHS border.

Answer 1

Instead of clip-path and complex transformation I would a simple linear-gradient to create this:
body {
margin:0;
height:100vh;
background:linear-gradient(100deg, transparent 70%,#F95E62 70.5%);
}

Answer 2

While I liked the simplicity of Temani Afif's answer, I was unable to get it working without the diagonal line either being blurry or pixelated.
After some fiddling, I was able to solve the problem using an SVG file, created from the original Adobe Illustrator artwork.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="1700px" width="300px" viewBox="0 14 300 1715">
/* Note that the SVG needs to have an implicit height and width
to avoid problems in Firefox */
<defs>
<style>
.cls-1{opacity:0.36;}
.cls-2{fill:#fff;}
.cls-3{fill:#f95e62;}
</style>
</defs>
<title>Asset 3</title>
<g class="cls-1">
<polyline class="cls-2" points="167.05 13.28 8.5 1721 334 1721 334 1721 334 13"/>
</g>
<polyline class="cls-3" points="334 1721 334 13 197 13 40.25 1720.99"/>
</svg>
I then added it in a div just inside my main container div.
<div id="header_triangle">
<img src="[path to the svg]" />
</div>
For which the styling is as follows...
#header_triangle {
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* needs to sit on top */
}
#header_triangle img {
height: 102%;
float: right; /* to Fix an issue in FF */
}
Here's the working CodePen.