CSSだけで縞模様が書けるらしいけど、いまいちだった

久々にCSSのお話です。

先に結果を言ってしまうとまだ実用的とは言えませんが、CSSだけで縞模様が書ける時代になっていました。
描くのに使うのは、グラデーションを繰り返し書くことができるrepeating-linear-gradientです。名前の通り、本来はグラデーションを書くためのものなのですが、

• 色の変更点を絶対指定する
• 色の境目を同じ数値で指定する

というのをやることで擬似的に縞模様が出来上がるという寸法です。つまりこういうこと。

background: repeating-linear-gradient(45deg, 色A, 色A 10px, 色B 10px, 色B 20px);

実際にやってみたのがこちらです。※Chromeで見てみてください。

これ、画像使ってないんですぜ？

でもなんかいまいちですよね？

そうなんです。とくに幅を細く、横に長く、縦に長くすると顕著で、縞模様ががたがたになってしまいます。また、上の例だとスマートフォンビューにして画面の横幅を動かすとわさわさして人によっては背筋がぞくっとするかもしれません。タイトルの背景や地の背景にはまだまだ使えませんが、ただ、100px四方くらいならあんまり崩れないので、ちょっとした部分では使える感じがします。