CSS SVG 遮罩导致锯齿状边缘

Question

我使用 SVG 进行背景剪辑。它非常好，除了在一个很长的容器上。如果容器太长，边缘会变得锯齿状。有没有原因和解决办法？

它必须是一个遮罩，因为背景也可以是图像或渐变。 也许对于我的情况还有一个更好的解决方案。

注意：箭头一侧的黑框（在宽屏幕上）可能会被忽略。

<div class="container">
  <div class="bg">
    Hoi
  </div>
</div>

.container {
  height:75rem;
  position: relative;
}

.bg {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: -82px;
    width: 101dvw;
    left: 50%;
    margin-left: -50.5dvw;

    mask: url(https://download.peggypay.com/wimtegroen/images/1large.svg) no-repeat center bottom, linear-gradient(#000 0 0);
    mask-composite: exclude;
    mask-size: 1920px 82px;
  background-color:black;
}

https://codepen.io/wimtegroen/pen/jENPKOo

Answer 1

使用更简单的 SVG，如下所示：

.box {
  --h: 50px; /* height of the arrow */

  height: 300px;
  background: linear-gradient(60deg,red,blue);
  mask:
    linear-gradient(#000 0 0) 0 calc(-1*var(--h)) no-repeat,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32"><path d="M0 0 L64 0 L46 18 C36 28 28 28 18 18 Z" fill="black"/></svg>') bottom/auto var(--h) no-repeat;
}

<div class="box"></div>

单独的 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32">
  <path d="M0 0 L64 0 L46 18 C36 28 28 28 18 18 Z" fill="black"/>
</svg>