CSS: Stripe with multiple colors

Question

I have a navigation bar and want it to have a border at the bottom like a multi-colored stripe. For example, Google uses a multi-colored stripe like this:

Could I do this in pure CSS, or would I have to use something like border-image?

Answer 1

You can do this with a linear gradient. In addition to just plain colors, you can do gradients for each stop. For google's own stripe, the color stops would look like this, CSS color names used for clarity:

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

You can play with background-position and background-size to make it smaller than just the full header size, or put it into an :after / :before element and change the size on that element.

Example of color stops with gradient:

http://codepen.io/tholex/pen/nCzLt