CSS对角渐变具有更平滑的过渡答案

【问题标题】：CSS diagonal gradient with a more smooth transitCSS对角渐变具有更平滑的过渡
【发布时间】：2019-03-23 01:12:25
【问题描述】：

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

正如你所看到的，这个栏有相同的颜色，左右和中间的右边有一些更亮的渐变，我一直在尝试获得相同的外观，尝试首先关注渐变部分有了这个

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

但这只会给我这种渐变

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

【问题讨论】：

删除百分比语句“背景：线性渐变（左上角，#1e2933，#39424B）；”而是。

标签： css reactjs sass

【解决方案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>

【讨论】：