border - CSS: 複数の色のストライプ

Question

ナビゲーションバーがあり、マルチカラーストライプのように下部に境界線を付けたいと考えています。たとえば、Google は次のような多色のストライプを使用しています。

Google マルチカラーストライプ。

純粋な CSS でこれを行うことはできますborder-imageか?

score 21 · Accepted Answer

線形グラデーションでこれを行うことができます。単色だけでなく、各ストップにグラデーションを適用できます。Google 独自のストライプの場合、カラーストップは次のようになります。わかりやすいように CSS のカラー名を使用します。

background-image: linear-gradient(
  to right, 
  blue,
  blue 25%,
  red 25%,
  red 50%,
  orange 50%,
  orange 75%,
  green 75%);

background-position と background-size をいじって、ヘッダー全体のサイズよりも小さくしたり、:after / :before 要素に入れてその要素のサイズを変更したりできます。

グラデーションを使用したカラーストップの例:

2 に答える 2