被 clip-path 隐藏的元素仍然会增加页面长度

Question

我正在尝试一个 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 轴上产生滚动条，部分原因是设计还需要使用全浏览器宽度条（参见 https://css-tricks.com/full-browser-width-bars/）

救援的剪辑路径！好吧，不幸的是不完全是。剪辑路径裁剪掉了我不需要的矩形底部的位，但不幸的是，这些位仍然计入页面的长度，这意味着我的页脚下方有一个空隙。

这是分配给父容器的剪辑路径代码...

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

这是 codepen of the problem。

如有任何帮助，我们将不胜感激。一个理想的解决方案是通过某种方式裁剪旋转矩形的多余部分，使其不会增加页面长度。或者，其他一些实现对角 RHS 边框的方法。

Answer 1

而不是 clip-path 和复杂的转换，我会用一个简单的线性渐变来创建这个：

body {
  margin:0;
  height:100vh;
  background:linear-gradient(100deg, transparent 70%,#F95E62 70.5%);
}

Answer 2

虽然我喜欢 Temani Afif 的简单回答，但如果没有对角线模糊或像素化，我无法让它工作。

经过一番尝试，我能够使用从原始 Adobe Illustrator 图稿创建的 SVG 文件解决问题。

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

然后我将其添加到主容器 div 内的 div 中。

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

这是 working CodePen。

被 clip-path 隐藏的元素仍然会增加页面长度

Elements hidden by clip-path still add to page length

html

css

css-transforms

clip-path