CSS3线性梯度

Question

这里是一个线性梯度，它在div左下角的右上角创建三角形，但是，我无法计算出如何只做右上角，即删除左下角。有人能帮忙吗？

这是密码

http://codepen.io/pete3795/pen/LZVLZK

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%);

Answer 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>

​