是否可以用css渐变做曲线？

Question

我有一个客户端的这个设计,在一个按钮中有两层渐变.棘手的是,其中一个层有一个弯曲的边缘.我已经嘲笑了按钮,所以你对我所说的内容有所了解,希望如此.

我设法做的是直边(参见代码片段,色差并不重要,只需要曲线).有没有人以前做过这个？或者它必须是背景图像？谢谢!

PS我还想过在伪元素和绝对位置上使用径向渐变,但是不能得到精确的直边看起来像线性渐变.

a {
  background-image: linear-gradient(-155deg,rgba(74,148,214,.4) 45%,rgba(255,255,255,.08) 15%),linear-gradient(258deg,rgba(87,238,255,.1),rgba(77,108,211,.2));
  background-color: rgba(74,148,214,.9);
  color: #fff;
  width: 200px;
  height: 40px;
  border-radius: 10px;
  margin-top: 50px;
  display: block;
  text-align: center;
  line-height: 40px;
}

<a>
  Some button
</a>

Answer 1

通过使用radial-gradient而不是线性,你可以非常接近:

a {

background-image: 
  radial-gradient(ellipse farthest-corner at 0 140%, #3c84cc 0%, #316dc2 70%, #4e95d3 70%);
  color: white;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  margin-top: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
}

<a>
  Some button
</a>