Css 可以弯曲线性渐变吗？

我正试图创建这个“swoosh”通过与CSS的图像

（无梯度）

---

我试着用一个径向梯度，但是，我不能让梯度突然“关闭”，因为梯度接近中心。最好的方法是以某种方式弯曲线性坡度吗

这就是我到目前为止所做的，我不希望蓝色出现在角落里，我只希望渐变的“切片”沿着图像向下延伸。

HTML

您可以在背景图像的顶部使用

.bg img{
宽度：620px；
高度：200px；
背景：径向梯度（425%-25%的椭圆800%500%，透明50%，rgba（0,0,255,0.4）50%，rgba（255,255,255,0）100%），url(http://lorempixel.com/620/200/animals);
}

---

如果我理解正确，那么你只需要让中间的部分更透明一点。您可以调整百分比和透明度以获得所需的效果

.glint{
背景：径向梯度(
透明10%，
rgba（255,255,255,1）80%；
指针事件：无；
z指数：1；
位置：绝对位置；
顶部：-700px；
左：200px；
宽度：1300px；
高度：1060px；
边界半径：100%；
}
.横幅图像{
溢出：隐藏；
背景：url（'http://i.imgur.com/OFFk8obg.png")不重复;；
背景尺寸：封面；
宽度：700px；
身高：361px；
位置：相对位置；
}

再试试

我使用边界半径来限制受渐变影响的部分；我需要一个比容器大的div来获得正确的形状

.test{
高度：400px；
宽度：1090px；
边框：实心1px绿色；
位置：相对位置；
溢出：隐藏；
}
.测试：之后{
内容：“；
宽度：96%；
身高：177%；
右图：-10%；
底部：0px；
位置：绝对位置；
边框左下半径：1374px 876px；
背景图像：线性渐变（向右，rgba（255255255,0.4），rgba（0,0,0.3））；
}

---

“我试过用径向渐变来做这件事”，请包括你试过的代码，因为这是一个合适的解决方案，听起来你很接近。有没有办法让渐变变成一个“切片”？看起来梯度仍在影响图像的右侧你是说右侧应该是透明的？是的，我相信要实现这一点，我必须将原点设置在图像的右上角。

<div class="banner-image">
  <div class="glint">

  </div>
</div>

.glint {
    background: radial-gradient(ellipse at center, rgba(0, 0, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -700px;
    left: 250px;
    width: 1300px;
    height: 1060px;
    border-radius: 100%;
}

.banner-image {
    overflow: hidden;
    background-image: url('http://via.placeholder.com/960x361');
    width: 960px;
    height: 361px;
    position: relative;
    }