Создание градиентной границы выглядит как линия

Question

Как я могу сделать границу градиента между цветами похожими на линию? Есть ли способ запустить линию в левом нижнем углу, а не в середине правой стороны кнопки? Я использую этот CSS для этого:

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

Answer 1

Вы должны переместить оба цвета в той же позиции:

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

Answer 2

Вы можете использовать следующий код, чтобы получить ожидаемый результат:

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>

calc() необходима чтобы линия была гладкой. В противном случае граница выглядит очень странно в некоторых браузерах.