CSS3 线性渐变答案

【问题标题】：CSS3 linear gradientsCSS3 线性渐变
【发布时间】：2016-06-03 18:06:38
【问题描述】：

这是一个线性渐变，它在 div 左下角的右上角创建三角形，但是，我不知道如何只为右上角制作，即删除左下角。谁能帮忙？

这里是代码笔

background: linear-gradient(45deg, rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%, rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%, rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%, rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%, rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%);

【问题讨论】：

标签： css linear-gradients gradient

【解决方案1】：

从 0% 到 5% 删除一个，从 5% 到 10% 删除一个

基本上在这里你必须想象一个页面有一系列分割它的线，旋转 45 度。

所以从页面的 0% 到 5%（左下），它是橙色的 - rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%

从 5% 到 10% - 灰色：rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%,

从 10% 到 90% - 浅灰色：rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%,

从 90% 到 95% - 灰色：rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%,

最后从 95% 到 100% - 橙色：rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%

.test {
  min-height: 17rem;
  background: linear-gradient(45deg, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 90%, rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%, rgba(237, 165, 9, 1) 95%, rgba(237, 165, 9, 1) 100%);

<div class="test">

</div>

或者正如 GCyrillus 指出的那样 - 如果您希望将角放在 CSS 的开头而不是结尾，您可以执行以下操作：

.test {
  min-height: 17rem;
  background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}

<div class="test">

</div>

【讨论】：

@stckpete np 很高兴我能提供帮助 - 如果您能接受答案，将不胜感激...... ;)
这也有效：背景：线性梯度（-135deg，rgba（237,165,9,1）0％，rgba（237,165,9,1）5％，rgba（231,229,219,1）5 %，rgba(231,229,219,1) 10%，rgba(240,239,235,1) 10%，rgba(240,239,235,1) 100%)；删除最后一部分并反向旋转.. codepen.io/gc-nomade/pen/xOGrrN
@CalvT 很好的解释。在您的第一个代码中，您真的必须重复相同的rgba 两次吗？如rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%。我删除了所有重复的 rgba，结果是一些模糊的三角形。为什么？
@J.Joe 因为基本上你设置了开始颜色和结束颜色。例如，以 95% 开始橙色，以 100% 结束橙色。这样你就可以从 95% 开始橙色，在 100% 结束蓝色，并获得有趣的效果 :)