CSSシークレット ―47のテクニックでCSSを自在に操る

よりよい斜めのストライプ

上に示した斜めのストライプは、実はあまり柔軟ではありません。例え

ば、45 度ではなく 60度や30 度あるいは 3.1415926535 度傾いたストライ

プが必要とします。グラデーションの角度だけを変更すると、図 2.34

（60 度の場合）のようにひどい結果になってしまいます。

実は、斜めのストライプを生成するためのよりよい方法がありま

す。 linear‐gradient()や radial‐gradient()にも、繰り返し表示

する た め の repeating‐linear‐gradient()と repeating‐radial‐

gradient()というバージョンがあるというこはあまり知られていませ

ん。これらを使うと、端に到達するまでカラーストップが繰り返されま

す。つまり、下の2つのコードはともに図 2.35のように表示されます。

繰り返しの線形グラデーションは、ストライプにぴったりです。何度で

も繰り返されるため、背景全体を簡単にストライプにできます。タイルに

ついて考える必要もありません。

例えば、図2.33 で作成したストライプは、繰り返しのグラデーション

を使って次のように記述できます。

このコードには、カラーストップの数を減らせるという明らかなメリッ

トがあります。色を変更したくなった場合に、修正が必要な箇所が 3つか

ら2 つになりました。また、ストライプの幅が background‐sizeではな

くカラーストップの位置として表現されていま