html - css中的形状渐变

Question

我尝试了几个小时来使形状渐变等于 Laracasts 处的渐变.实际上我的代码没有显示任何内容，有人可以帮助我吗？

a{
    background: linear-gradient(118deg,#328bf2,#1644ad);
    border-radius: 54% 46% 64% 36%/64% 42% 58% 36%;
    content: "";
    position:absolute;
    top: -250px;
    left: 48%;
    width: 930px;
    height: 870px;
}

<a></a>

Answer 1

我会为此考虑一些 SVG，以便轻松创建形状的 flex 部分，然后将其应用为多个背景层的一部分:

.container {
  height: 100vh;
  background: 
  linear-gradient(#fff,#fff) left/calc(100% - 100vh) 100% no-repeat,
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ><path d="M0 64 L64 64 C60 50 56 46 29.33 50.83 C15.33 53.16 10.5 40.33 17.16 27.66 C20 11.66 16.33 6.5 0 0 Z"  fill="white"/></svg>') right/auto 100% no-repeat, 
  linear-gradient(118deg,#328bf2,#1644ad); 
}

body {
 margin:0;
}

<div class="container">

</div>

这是一个很好的在线工具，您可以在其中轻松调整形状:

http://jxnblk.com/paths/?d=M0 64 L64 64 C60 50 56 46 29.33 50.83 C15.33 53.16 10.5 40.33 17.16 27.66 C20 11.66 16.33 6.5 0 0 Z

只需附加当前路径即可对其进行编辑。