html - 如何制作带有渐变的曲线形状？

Question

我必须使用 CSS 创建这样的图像:-

如果不可能，那么我该如何以最小的图像尺寸使用它？就像在下面的代码中一样，我使用了两张图片，但这也不起作用......

<div style="background:url('/image/veeS8.png') no-repeat top center, url('/image/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">

</div>

Answer 1

也可以在不使用图像的情况下使用 mask 。这更灵活。您可以通过更改变量轻松控制斜率。

.container {
  --slope: 100px;
  width: 100%;
  height: 500px;
  --mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat, 
          linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}

<div class='container'></div>