CSSリニア背景色

Question

div内で線形背景の単色（両側の勾配）を作成する方法。あなたはその後、グラデーションを削除...グラデーションをしたくない場合にのみ...
（すなわちbackground: rgb(0, 255, 113);を使用して...

を

background: rgb(0, 255, 113); 
background: -moz-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%); 
background: -webkit-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%); 
background: -o-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%); 
background: -ms-linear-gradient(49deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%); 
background: linear-gradient(139deg, rgb(0, 255, 113) 42%, rgb(90, 140, 250) 0%); 

https://jsfiddle.net/52254dte/

Answer 1

を助けてくださいまたはあなたが望むどんな単一の色でも）。明快後

Fiddle update

....ちょうど色を追加すると、グラデーションに停止します.....

div { 
 
\t text-align: center; 
 
    color: #fff; 
 
    margin: 30px; 
 
    padding: 10px 0; 
 
    
 
    
 
\t background: rgb(0, 255, 113); 
 
background: -moz-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%); 
 
background: -webkit-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%); 
 
background: -o-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%); 
 
background: -ms-linear-gradient(49deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%); 
 
background: linear-gradient(139deg, rgb(0, 255, 113) 30%, rgb(90, 140, 250) 30%, rgb(90, 140, 250) 70%, rgb(0, 255, 113) 70%);}

<div>Some Text</div>

Answer 2

勾配を使用しますが、中に実際の変更を行います非常に小さい（例えば0.1％）

linear-gradient(135deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%) 

この方法を使用して、0％〜29.9％のソリッドカラー、次に29.9％〜30％の他のカラーへの移行を行います。

div { 
 
    display: block; 
 
    width: 300px; 
 
    height: 100px; 
 
    
 
    background: -moz-linear-gradient(-45deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%); 
 
    background: -webkit-linear-gradient(-45deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%); 
 
    background: linear-gradient(135deg, #ff0000 0%, #ff0000 29.9%, #ffffff 30%, #ffffff 70%, #ff0000 70.1%, #ff0000 100%); 
 
}

<div></div>