调整斜向线性渐变占比后褪色，如何实现清晰分界的比例调整？

要实现145deg斜向清晰分界，同时让蓝色（#3fd8f6）占30%、绿色（#609210）占70%的效果，核心是让两个颜色的渐变停止位置完全重合，避免中间产生过渡区域。

正确代码示例 #

background: linear-gradient(145deg, #3fd8f6 30%, #609210 30%);

原理说明 #

• 线性渐变中，当两个颜色的停止百分比相同时，它们之间不会生成过渡渐变，而是直接形成清晰的分界。
• 145deg 保留了斜向渐变的角度，而30%这个共同的停止点，就把容器按斜向分割成了30%蓝色、70%绿色的区域——蓝色从渐变起点延伸到30%位置，绿色从30%位置开始填充剩余区域。

你之前用#3fd8f6 30%, #609210 70%出现过渡，是因为两个颜色的停止位置相差了40%，浏览器会自动在这两个位置之间生成平滑过渡的渐变层。而把两个停止点设为同一个值，就彻底消除了过渡区域，同时精准控制了颜色占比。

内容的提问来源于stack exchange，提问作者Shtarley