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

Question

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

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

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

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代替线性：

可以非常接近

＆＃13;

＆＃13;

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;
}

＆＃13;

<a>
  Some button
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用伪元素使用圆圈绘制曲线，然后只使用您想要的任何渐变作为背景

＆＃13;

＆＃13;

a {
    background-color: lightblue;
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    margin-top: 50px;
    display: block;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
a:after {
    content: '';
    position: absolute;
    background-color: blue;
    width: 600px;
    height: 200px;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: translate(-49%,0);
    z-index: -1;
}

＆＃13;

<a>
  Some button
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我刚修改了一些 @Blazemonger 的帖子。 我修正了曲线的位置。

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

<a>Some button</a>