ナビゲーションバーのグラデーションの色

Question

どのようにこのようなナビゲーションバーの色を付けることができますか？

ブラック左上隅に、青の右下隅にあると、それらの間に勾配を作ります。これは、あなたが求める正しい方法、

ない

Answer 1

1号私は、なぜ私はあなたを与えているのコンセプトを持って、あなたはどんな質問を次回はこれをチェックしてください、

Stack Overflowではありません無料コードライティングサービス。自分でコードを書くことが期待されます。あなたが問題を抱えている場合、より多くの研究をした後で、何がうまくいかないかの明確な説明と試したことを投稿して、Minimal, Complete, and Verifiableの例を提供することができます。私はHow to Ask a good questionを読むことをお勧めします。

そして今のあなたは線形グラデーションがどのように動作するか私はここに行くだろう学びたい場合は、この、

.box{ 
 
width: 150px; 
 
height: 50px; 
 
border-radius: 0px 0px 0px 7px; 
 
background: rgba(0,0,0,1); 
 
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%); 
 
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(34%, rgba(0,0,0,1)), color-stop(100%, rgba(44,153,221,1))); 
 
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%); 
 
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%); 
 
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%); 
 
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#2c99dd', GradientType=1); 
 
}

<div class="box"></div>

Answer 2

を試してみてください。MDN linear-gradient

.link { 
 
    width: 100px; 
 
    height: 1.5em; 
 
    display: inline-block; 
 
    background: linear-gradient(135deg, black 30%, DeepSkyBlue 100%); 
 
}

<nav> 
 
    <a class="link"></a> 
 
    <a class="link"></a> 
 
    <a class="link"></a> 
 
    <a class="link"></a> 
 
</nav>

Answer 3

これはあなたが探しているものかもしれません。

.box { 
 
background: rgba(0,0,0,1); 
 
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%); 
 
background: -webkit-gradient(left top, right bottom, color-stop(18%, rgba(0,0,0,1)), color-stop(100%, rgba(3,152,252,1))); 
 
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%); 
 
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%); 
 
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%); 
 
background: linear-gradient(135deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#0398fc', GradientType=1); 
 
    height: 80px; 
 
    width: 200px; 
 
}

<div class='box'></div>