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:

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(left, 
  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

Answer 2

I think you're much better doing this with a background image. You can keep the image really tiny by making each colour 1px wide and your image file 1px tall (they'll scale perfectly, with crisp edges).

An example:

.navigation-bar:after {
    content: " ";
    height: 6px;
    width: 100%;
    background: url(../img/stripe.png) repeat;
    background-size: 100% 1px;
}