css - 具有更平滑过渡的 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;
}

但这只会给我这种渐变

我似乎无法让过境变得更亮，越靠近对角线梯度的断裂，这是如何实现的？

标签： cssreactjssass

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>