Html 剪辑路径隐藏的元素仍然会增加页面长度

我正在尝试一个在右边有对角线边框的HTML页面。事实上，它在实心边框旁边有一个半透明的边框（与其他页面上的一些设计元素相呼应）。我创建这条线的方法是使用两个稍微旋转的矩形，一个在：before中，另一个在：after伪元素中

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

我想我可以使用SVG形状，但我认为这需要很长时间来微调，特别是因为页面长度需要是动态的（应该能够在400像素到1500像素之间）

我曾尝试使用overflow-y:hidden，但这会在x轴上产生一个滚动条，部分原因是设计还需要使用完整的浏览器宽度条（请参阅）

剪辑救援路径嗯，不幸的是，不完全是。Clip path裁剪掉我不需要的矩形底部的位，但不幸的是，仍然将这些位计算到页面长度，这意味着我的页脚下有一个间隙

以下是分配给父容器的剪辑路径代码

clip-path: inset( -100vw -100vw 0 -100vw);

这是一个例子

---

在此方面的任何帮助都将不胜感激。理想的解决方案是裁剪多余的旋转矩形，这样就不会增加页面长度。或者，使用其他方法实现对角RHS边界。

而不是

剪辑路径和复杂变换，我将使用简单的线性渐变来创建此边界：


正文{
保证金：0；
高度：100vh；
背景：线性梯度（100度，透明70%，#F95E62 70.5%）；
}
虽然我喜欢Temani Afif简单的答案，但如果对角线不模糊或像素化，我就无法让它工作

经过一些修改，我能够使用一个SVG文件解决这个问题，该文件是从原始的AdobeIllustrator艺术品创建的

<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>

这是最新消息。
哇！谢谢你。很好，很好，很简单。我唯一担心的是（我在使用渐变制作全长列时发现这一点）边缘非常模糊。@clayRay是的，这是渐变的一个小问题：）它们不是抗锯齿。。。正如您所见，您需要减少最后一个值（70.5%）使其接近70%，但不要太多，因为如果您使其相等，则会产生另一个不良影响。。。因此，请调整该值，直到您得到一些好的结果。谢谢。但是，模糊度似乎不会随着最后一个值的减小而改变，即使我将其降低到70.03%，那么在70.02%时，它会变为像素化的线，而没有任何抗锯齿。
  <div id="header_triangle">
    <img src="[path to the svg]" />
  </div>

#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 */
}