web-dev-qa-db-ja.com

CSS線形グラデーションを使用して単色を生成します（滑らかな色ではありません）

私の線形CSSグラデーションが次のようになっていると仮定します。

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

次のようなCSSグラデーションが生成されます。

enter image description here

同じグラデーションを作成する方法を教えてください。ただし、色間の遷移なしで単色を使用しますか？ （CSSを使用）

これに似たもの：

enter image description here ありがとう

cssgradientlinear-gradients
8
Evgeny Boxer

このような

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}
<div class="gradient"></div>
13
fen1x

グラデーションは、色のブレンドによって作成されます。 各色の範囲を指定することで色のブレンド効果を制御できます以下の.flagの例のように。 .flag：

  1. 色#00ae00は、divの33.3%まで適用されます
  2. その時点から66.6%まで、whiteが適用されます
  3. 最後に、orangeは66.6%からボックスの終わりまで始まります

このようにして、必要な数の色を追加できます。

ただし、次数がまっすぐな場合は問題なく表示されます。角度を変更すると、.pixeletedに示すように、色のエッジが滑らかに見えない場合があります（色と画面の密度によって異なります）。

.flag{
  background: linear-gradient(to right, #00ae00 33.3%, white 33.3%, white 66.6%, orange 66.6%);


margin-right: 20px;
}

.pixeleted{
    background: linear-gradient(30deg, red 33.3%, black 33.3%, black 66.6%, red 66.6%);
}
    
div {
  width: 290px;
  height: 145px;
  border: 2px solid #999;
  display: inline-block;
}
<div class="flag"></div>
<div class="pixeleted"></div>
6
Robert Williams