CSS对角渐变，过渡更顺畅

Question

我以前从未使用过渐变，我正在尝试实现与此非常相似的东西

如您所见，该条具有相同的颜色，左右和左右，位于中间的右边，它具有某种更明亮的渐变，我一直在尝试着先尝试着眼于渐变部分，以得到相同的外观

    export class LeaderboardBar extends React.Component<Props, State>
{
    render()
    {
        return (
            <div>
            <div id="leaderboard-bar-left">
            </div>
            <div id="leaderboard-bar-right">
            </div>
            </div>
        )
    }
}

和这个CSS

    #leaderboard-bar-left {
    width: 60%;
    height: 40px;
    background: linear-gradient(to top left, #1e2933 50%, #39424B 30%);
    position: absolute;
    top: 0;
    left: 0;
}

#leaderboard-bar-right {
    width: 40%;
    height: 40px;
    background-color: #1e2933;
    position: absolute;
    top: 0;
    right: 0;
}

但这只会给我这种渐变

我似乎无法使过渡变得更明亮，这是如何实现的？

Answer 1

您可以尝试这样的多个渐变：

.box {
  height:50px;
  background:
    linear-gradient(#1e2933,#1e2933) right/120px 100%,
    linear-gradient(to bottom right, transparent 47%, #1e2933 52%) calc(100% - 118px) 0/40% 100%,
    linear-gradient(to right, #1e2933 , #39424B 50%);
  background-repeat: no-repeat;
}

body {
 margin:0;
}

<div class="box"> 
</div>