CSS3のgradientプロパティで斜めのストライプ背景を描いてみる

CSS

html {

  color:#fff;
  background-color:pink  /* Opera、IE用代替スタイル指定 */  ;
  background-position: left top; background-repeat: repeat;

  -webkit-background-size: 50px 50px; 
     -moz-background-size: 50px 50px;
          background-size: 50px 50px;


  /* --Firefox用指定------------------------ */
  background-image:
    -moz-linear-gradient(
      top left -45deg,
      purple,
      purple 25%,
      pink 26%,
      pink 50%,
      purple 51%,
      purple 75%,
      pink 76%,
      pink
  );

  /* --Safari、Chrome用スタイル------------- */
  background-image:
    -webkit-gradient(
      linear, left top, right bottom,
      from(purple),
      color-stop(0.25, purple),
      color-stop(0.25, pink),
      color-stop(0.50, pink),
      color-stop(0.50, purple),
      color-stop(0.75, purple),
      color-stop(0.75, pink),
      to(pink)
  );

}

最新版のGekko/Webkit搭載ブラウザで正しく表示されます。本来は滑らかなグラデーションを描く為のプロパティですが、隣り合うピクセルから色を急変化させるような指定をする事によって、２色のストライプを実現しています。しかしGeckoで微妙にずれます。中途半端な数値指定はそれを緩和する為のものです（‥‥が、ページズームでやっぱり謎の1px欠けが出ます）(･ω;)

画像を使えばいいような気もしますが、webkit-animationかJavaScriptと併用すると、何か面白い事が出来るような気がします。

css gradients in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blogに、なんかもっと簡単に描けそうな方法が‥‥。