CSS linearen Gradienten Winkelposition

Question

Ich versuche, eine abgewinkelte Hintergrund mit linearen Gradienten zu erzeugen.

Allerdings kann ich nur herausfinden, wie man einen weißen Bereich schafft, der von links unten nach rechts oben geht.

background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%); 

https://jsfiddle.net/bfq3vv6n/

Aber, ich will den weißen Bereich eher auf die linke Seite der Seite auf halben Weg bis beginnen, als von unten, und dann beenden, wo sie bereits in den oberen rechten Seite (siehe Bild für wie ich es aussehen soll)

Weiß jemand wie ich das machen kann?

Answer 1

Es ist einfacher zu berechnen, wenn Sie die Hintergrundgröße auf das Doppelte sein, in der Breite eingestellt.

Auf diese Weise wird das Zentrum des Gradienten mit dem Mittelpunkt in der Mitte der linken Seite kohärent sein:

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid 1px green; 
 
    background-image: linear-gradient(153.43deg, white 50%, gray 50%); 
 
    background-size: 200% 100%; 
 
    background-position: right top; 
 
}

<div></div>

Answer 2

So etwas würde helfen?

div { 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+40,e0e0e0+100&0+0,0+39,1+40,1+100 */ 
 
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(225,225,225,0) 39%, rgba(224,224,224,1) 40%, rgba(224,224,224,1) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#e0e0e0',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid #ccc; 
 
}

<div></div>

Ich benutzte es, mit Hilfe von ColorZilla. Außerdem bietet es viele Tools, damit es so aussieht, wie Sie es erwarten.

Vorschau