CSSで斜めのストライプ模様

背景画像などを「斜めストライプ」の模様にしたいとき、昔はフォトショで小さいスライス画像を作って敷いていました。
ググったところ今どきはCSSだけで作れるようです。
linear-gradient()などのグラデ用の関数があり、これを少しトリッキーに使うことで簡単に実装できてしまいます。時代は変わりましたね。

ところがストライプの設定や環境によってはこの「斜めストライプ」でモアレ?のようなものが発生してしまうようで、結局画像を使う方がよさそうです。

私の場合はMacのFirefoxやChromeで症状が出ました。
background-sizeで微調整していたのですがChromeで直ったと思ったらFirefoxで再発したり…うーむ。
ストライプの線が細い場合に、Retinaの細かいドットと斜めの角度が干渉するのではないかと思っています。
SafariやWindowsでは問題ありませんでした。

上図はいずれもMacスクリーンショット(200%に拡大)。

ちなみにストライプ画像はgifやjpgでなくsvgで行けます。
svgならRetinaでもきれいにラインが出ますよ!