ピーーーーーーーーーーーーー
See the Pen
color-bar by saeka-hirai (@saeka-hirai)
on CodePen.
実装方法
HTML
<sectionclass="color-bar"></section>これだけ
日頃装飾のために空divを無駄遣いしている諸君
これくらいのモノならCSSの擬似要素使えば実装できるゾ
CSS
linear-gradientというポテンシャルの塊
「CSS グラデーション」を検索にかけるとほぼほぼ出てくる
linear-gradientというproperty。
文字通りグラデーションを実装するときに使います。
参考URL : https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient
でも、実は他の使い道もあるポテンシャルの塊なんです
linear-gradientの値は、先の後と次の前の配分を同じ値で繋げると、
なんと単色で色を置くことができます。
さらに配分次第では何色も追加することができる優れもの
(同じ値で繋げなくてもグラデーションになるだけです
)
あとは入れたい色数分繋げていくだけで、
一つの要素にたくさんの色を入れることができます。
こんな感じ
background:linear-gradient(toright,navy20%,white20%40%,purple40%60%,gray60%72%,dimgray72%77%,gray77%82%,silver82%87%,black87%100%);20 -> 20 40 -> 40 60
ってなっているのがわかりますか？ 
応用(?)編
梨汁ブシャー
See the Pen funassyi by saeka-hirai (@saeka-hirai) on CodePen.
※変数機能、Sassだけじゃなくて実はCSSも標準で持ってます
＼\ 月に代わっておしおきよ ![:crescent_moon:]( ":crescent_moon:")
/／
/／See the Pen Slice Pretty Guardian by saeka-hirai (@saeka-hirai) on CodePen.
Slice Herosっていうゲームの問題に出てくるキャラの色味を再現してみました。
遊んでみてね。
グラデーション作りたい人は
このサイトが画期的なので遊んでみてください！
(どんなに濁る組み合わせで色を入れても、
いい感じのグラデーションを作ってくれる優れもの
)
https://mycolor.space/gradient