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

【问题标题】：Elements hidden by clip-path still add to page length剪辑路径隐藏的元素仍会增加页面长度
【发布时间】：2018-05-17 11:45:26
【问题描述】：

我正在尝试一个在右侧有对角线边框的 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 裁剪掉我不需要的矩形底部的位，但不幸的是仍然将这些位计入页面长度，这意味着我的页脚下方有一个间隙。

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

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

这是codepen of the problem。

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

【问题讨论】：

标签： html css css-transforms clip-path

【解决方案1】：

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

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

【讨论】：

哇！感谢那。它非常好，又好又简单。我唯一担心（我在使用渐变制作全长列时发现这一点css-tricks.com/fluid-width-equal-height-columns）是边缘非常模糊。
@clayRay 是的，这是渐变的小问题 :) 它们不是抗锯齿的……正如您所看到的，您需要减小最后一个值（70.5%）以使其接近到 70% 但不要太多，如果你让它相等，你会产生另一个不好的影响......所以调整这个值直到你得到好的东西
谢谢你，但是模糊度似乎并没有改变，我把最后一个值设置得越小，即使我把它降低到 70.03%，然后在 70.02% 时它变成一条没有任何像素化的线完全抗锯齿。

【解决方案2】：

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

经过一番折腾，我能够使用一个 SVG 文件来解决这个问题，该文件是由原始 Adobe Illustrator 图稿创建的。

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

【讨论】：