CSS3 线性渐变

Question

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

这是代码笔

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 指出的那样 - 如果您希望将 Angular 落放在 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>