CSS3 линейные градиенты

Question

Вот линейный градиент, который создает треугольники в верхнем правом нижнем левом углу div, однако я не могу разобраться, как сделать только верхний правый, т. Е. Удалить нижний левый. может ли кто-нибудь помочь?

Вот это codepen

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>