html - 是否可以用 css 渐变做一条曲线？

Question

我从一个客户那里得到了这个设计，在一个按钮中有两层渐变。棘手的是，其中一层有 flex 的边缘。我模拟了按钮，希望您能理解我在说什么。

我设法做的是一条直边(见代码片段，色差并不重要，只需要曲线)。以前有人做过吗？还是必须是背景图片？谢谢!

附言我还考虑过在伪元素上使用径向渐变并对其进行绝对定位，但无法获得像线性渐变那样的精确直边。

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>