Striped CSS gradient using box-shadow. I'm sure it's been done elsewhere (http://vimeo.com/join, for one), I just haven't run across a pure CSS version, yet.

index.html

<div id="box" class="black-white"></div>
<div id="box" class="red"></div>
<div id="box" class="rainbow"></div>

style.css

#box {
  background: #fff;
  border: 5px solid #000;
  display: block;
  float: left;
  height: 100px;
  position: relative;
  margin-top: 30px;
  margin-right: 10px;
  width: 405px;
}

#box.black-white:before {
  background: hsla(0, 0.0000%, 0%, 1.0000);
  content: "";
  height: 100px;
	padding-left: 3px;
	position: absolute;
	width: 50px;
  box-shadow: 50px 0 0 hsla(0, 0.0000%, 14%, 1.0000), 
							100px 0 0 hsla(0, 0.0000%, 28%, 1.0000),
							150px 0 0 hsla(0, 0.0000%, 42%, 1.0000),
							200px 0 0 hsla(0, 0.0000%, 56%, 1.0000),
							250px 0 0 hsla(0, 0.0000%, 70%, 1.0000),
							300px 0 0 hsla(0, 0.0000%, 84%, 1.0000),
							350px 0 0 hsla(0, 0.0000%, 100%, 1.0000);
}

#box.red:before {
  background: hsla(360, 100.0000%, 1%, 1.0000);
	content: "";
	height: 100px;
	padding-left: 3px;
	position: absolute;
	width: 50px;
  box-shadow: 50px 0 0 hsla(360, 100.0000%, 14%, 1.0000), 
							100px 0 0 hsla(360, 100.0000%, 28%, 1.0000),
							150px 0 0 hsla(360, 100.0000%, 42%, 1.0000),
							200px 0 0 hsla(360, 100.0000%, 56%, 1.0000),
							250px 0 0 hsla(360, 100.0000%, 70%, 1.0000),
							300px 0 0 hsla(360, 100.0000%, 84%, 1.0000),
							350px 0 0 hsla(360, 100.0000%, 100%, 1.0000);
}

#box.rainbow:before {
  background: hsla(360, 100.0000%, 50%, 1.0000);
	content: "";
	height: 100px;
	padding-left: 3px;
	position: absolute;
	width: 50px;
  box-shadow: 50px 0 0 hsla(309, 100.0000%, 50%, 1.0000), 
							100px 0 0 hsla(258, 100.0000%, 42%, 1.0000),
							150px 0 0 hsla(207, 100.0000%, 42%, 1.0000),
							200px 0 0 hsla(156, 100.0000%, 56%, 1.0000),
							250px 0 0 hsla(105, 100.0000%, 70%, 1.0000),
							300px 0 0 hsla(54, 100.0000%, 84%, 1.0000),
							350px 0 0 hsla(0, 100.0000%, 100%, 1.0000);
}