線形グラデーションCSSを曲げることは可能ですか？

Question

私はこの「swoosh」をCSSでイメージに作成しようとしています。 （勾配なし）

http://imgur.com/a/wOyvk 私は、勾配は、中心に近づくにつれてしかし、私は、突然「遮断」する勾配を得ることができない、放射状グラデーションでこれをやって試してみました。ライナーグラデーションを何とか曲げるのが最善の方法でしょうか？

これは私が今まで持っていたものですが、青がコーナーにくることを望んでいません。画像の下にあるグラデーションの「スライス」がほしいだけです。 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を使用することができます。

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

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

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

ちょうど別の私は、勾配の影響を受けて一部を制限するために、国境半径を使用しています

を試してみてください。それはだとして、私は「私は放射状グラデーションでこれをやって試してみました」適切な形状

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