グラデーションの境界を線のように見える

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()が必要とされているがラインを滑らかにする。それ以外の場合は、一部のブラウザでは境界が非常に奇妙に見えます。