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

CSS

html {

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

  /* --Firekox用指定------------------------ */
  background-repeat:repeat;
  -moz-background-size: 50px 50px;
  background-image:
    -moz-linear-gradient(
      top left -45deg,
      purple 0%,
      purple 25%,
      pink 25.5%,
      pink 50%,
      purple 50.5%,
      purple 75%,
      pink 75.5%,
      pink 100%
    );

  /* --Safari、Chrome用スタイル------------- */
  -webkit-background-size:50px 50px;
  background-image:
    -webkit-gradient(
      linear,
      left top,
      right bottom,
      color-stop(0, 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),
      color-stop(1, pink)
    );

}

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

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

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