Farbverlaufsrahmen wie eine Linie aussehen lassen

Question

Wie kann ich den Farbverlauf zwischen den Farben wie eine Linie aussehen lassen? Gibt es auch eine Möglichkeit, die Linie in der linken unteren Ecke und nicht in der Mitte der rechten Seite der Schaltfläche zu beginnen? Ich verwende diese CSS für diese:

background: linear-gradient(to right bottom, #00C9FF 30%, black 50%) 

Answer 1

Sie sollten beide Farben auf die gleiche Position bewegen:

background: linear-gradient(to right bottom, #00C9FF 30%, black 30%); 

Answer 2

Sie können den folgenden Code verwenden, um die erwarteten Ergebnisse zu erhalten:

div { 
 
    background: linear-gradient(to right bottom, #00C9FF calc(50% - 1px), black calc(50% + 1px)); 
 
    border:7px solid #00C9FF; 
 
    color:#fff; 
 
    height:100px; 
 
    line-height:100px; 
 
    text-align:center; 
 
    width:100px; 
 
}

<div>Test</div>

Die calc() benötigt wird um die Linie glatt zu machen. Ansonsten sieht der Rahmen in einem Browser sehr seltsam aus.