是否可以弯曲线性渐变CSS？

Question

我正在努力创造这个＆＃34; swoosh＆＃34;通过CSS的图像。

http://imgur.com/a/wOyvk（没有渐变） 我尝试用径向渐变做到这一点，但是，我无法通过渐变来关闭＆＃34;关闭＆＃34;突然，随着梯度接近中心。最好的方法是以某种方式弯曲线性梯度吗？

这就是我到目前为止，我不希望蓝色在角落里，我只想要一个＆＃34;切片＆＃34;向下运行图像的渐变 https://jsfiddle.net/uh882Lcw/

HTML

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

  </div>
</div>

CSS

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

Answer 1

您可以在背景图片上使用radial gradient。

＆＃13;

＆＃13;

.bg-img {
  width: 620px;
  height: 200px;
  background: radial-gradient(ellipse 800% 500% at 425% -25%, transparent 50%, rgba(0, 0, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%), url(http://lorempixel.com/620/200/animals);
}

＆＃13;

<div class="bg-img"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我正确理解你，那么你只是希望中心位更透明一点。您可以调整百分比和透明度以获得您想要的效果。

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

.banner-image {
  overflow: hidden;
  background: url('http://i.imgur.com/OFFk8obg.png') no-repeat;
  background-size: cover;
  width: 700px;
  height: 361px;
  position: relative;
}

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

Answer 3

再试一次

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

.test {
  height: 400px;
  width: 1090px;
  border: solid 1px green;
  position: relative;
  overflow: hidden;
}

.test:after {
  content: "";
  width: 96%;
  height: 177%;
  right: -10%;
  bottom: 0px;
  position: absolute;
  border-bottom-left-radius: 1374px 876px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.4), rgba(0,0,0,0.3));
}

<div class="test"></div>