CSS3 lineare Farbverläufe

Question

Hier ist ein linearer Farbverlauf, der Dreiecke in der oberen rechten unteren linken Ecke des Div erstellt, aber ich kann nicht herausfinden, wie nur für die obere rechts, d. H. Entfernen Sie die untere links. Kann jemand helfen?

Hier wird die

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

Entfernen Sie die eine von 0% bis 5% und eine von 5% bis 10%

Grundsätzlich hier codepen Sie eine Seite stellen müssen mit einer Reihe von Linien geteilt, um 45 Grad gedreht.

So von 0% der Seite, auf 5% (unten links), dann ist es orange - rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%

von 5% bis 10% - grau: rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%,

von 10% bis 90% - hellgrau : rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%,

von 90% bis 95% - grau: rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%,

und schließlich von 95% bis 100% - orange: 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>

Oder wie GCyrillus darauf hingewiesen - wenn Sie lieber Ihre Ecke statt am Ende zu Beginn des CSS haben, können Sie folgendes tun:

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