フレックスボックスの線形勾配をより広いスクリーンで移動する

Question

ダンノービューポートの幅が少なくとも1000pxのとき、最初の矩形の下に直線勾配がシフトするのはなぜですか？

fiddle

勾配：そのような直線勾配または何かを行うには

.hero:before { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    right: 0; 
    bottom: 5px; 
    left: 0; 
    border-radius: 10px; 
    background: linear-gradient(rgba(0,0,0,0) 65%, rgb(93, 240, 255) 120%); 
} 

Answer 1

何も、上の2つの要素の幅が異なっています底3の幅（520 + 255 = 775対255 + 255 + 255 = 765）。そして、あなたはcalcに％値を使用しているので、実際の（px）の差は画面サイズによって変わります。