linear-gradientの斜線ストライプが上手くいかない理由？色々検証！

CSSで色々なストライプを作る方法！＞
↑こちらの続きです。上の投稿では「repeating-linear-gradient」を使って簡単に斜めストライプを実装する方法もご紹介しています！斜めストライプを作りたいという方は上記記事の方をご覧ください。

本ページでは、「linear-gradient」の場合、角度だけ設定しても綺麗な斜めストライプにならないので、どういった設定をすれば上手くいくかを調べているページになります。それでは検証した結果を見てみましょう。

スポンサーリンク

linear-gradientの斜線ストライプが上手くいかない理由

背景を斜線にするためのリピート画像は下記のようになります。

上の画像は見やすく90pxの大きさにしましたが、「3px×3pxの画像」を背景にしてみると、下記のようになります。ちゃんと斜線のストライプになっているかと思います。

ここが原因となっています。

原因

改めて画像をご覧ください。

これを言葉で表すと、オレンジが開始、オレンジが終了、白が開始、白が終了、オレンジが開始（2度目）、オレンジが終了（2度目）、白が開始（2度目）、白が終了（2度目）となります。
ここで先ほどまで設定していたCSSを確認してみましょう。

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px /* 色2終了（位置） */
);

このソースも言葉で表してみると、白が開始、白が終了、黒が開始、黒が終了となります。そうなんです、斜線にするには線が足らないのです。

他にも違いはあります。

線の太さ

色を指定する数が2倍になります。つまり、１つあたりの太さが半分になります。よって、background-sizeを2倍にするか、範囲を半分にする必要があります。

今回は同じ太さになるように調整して、一度確認してみましょう。

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px, /* 色2終了（位置） */
  #fff 20px, /* 色3開始（位置） */ 
  #fff 30px, /* 色3終了（位置） */
  #000 30px, /* 色4開始（位置） */ 
  #000 40px /* 色4終了（位置） */ 
);
background-repeat: repeat;
background-size: 40px 40px;

おしいですね。完全ではありませんが、変更前よりは斜線に近づいてきました。

三平方の定理：斜めの線は長くなる

三平方の定理って覚えていますか？ 60°と30°の直角三角形であれば「１：２：√３」、45°の直角2等辺三角形であれば「１：１：√２」です。

【左側】30°、60°、90°の直角三角形、【右側】45°、45°、90°の二等辺直角三角形

今45°の斜めストライプなので、横ストライプの√２倍長くなります。つまり、画像サイズが縦・横ともに√２倍になっているのです。

分かりにくいかと思いますので、画像で説明します。下画像のように「40×40の画像」を45°回転させます。すると、「56×56の画像」に変わります。よって、今回も画像を45°回転させているので、「background-size: 40px 40px」では画像が表示しきれていないため、先ほど試したようにずれてしまいます。

40×40の画像を45°回転すると56×56のサイズになる
40×40の正方形を45°回すとなぜ「56」？

40×40の正方形に対角線を引くと、45°の2等辺直角三角形ができますので、対角線は正方形の一辺の長さ40×√2倍（約1.4倍）となります。画像を見ると分かりますが、45°回転させた正方形を囲むには1辺対角線の長さ分の正方形が必要ですよね。
よって、「56」となります。

background-sizeを1.4倍にする

√２は1.41421356・・・なので、background-sizeを更に1.4倍にしてみましょう。

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px, /* 色2終了（位置） */
  #fff 20px, /* 色3開始（位置） */ 
  #fff 30px, /* 色3終了（位置） */
  #000 30px, /* 色4開始（位置） */ 
  #000 40px /* 色4終了（位置） */ 
);
background-repeat: repeat;
background-size: 56px 56px;

 

ようやく、綺麗な斜めストライプになりました。

background-size（背景画像サイズ）は下の理屈の方が正しいかも？

background-size（背景画像サイズ）に関して、下に書いている内容の方がもしかすると正しい理屈かもしれません。
その理由は、30°、60°、45°（※45°は少し無理やり）のどの場合でも正しく斜めストライプが実装できたためです。↑の理屈だと30°、60°は上手くいきません…。

角度30°と角度60°について

角度30°と角度60°については45°と同じ理屈では上手くいきませんでした。ですが、違うパターンで考えると30°、60°はともに同じ考えで綺麗な斜めストライプになりました。

ただし、同じ考えを45°にあてはめても上手くはいきませんでした。ですが、少し工夫すると45°でも同じ理屈で綺麗なストライプになりますので、それは最後に載せておきますね。

45°と30°・60°で少し考え方が違うので考え方が何か間違っているのだと思いますが、今のところはここまでしか関係性を見つけられませんでした。

どなたか正しい設定値をご教示（コメントして）いただけると幸いですm(__)m

角度30°

画像について説明します。

  • 青線は0°の時の線です
  • 赤線は30°回転させた後の線です
  • 赤線から青線に垂線（緑線）を引きます
  • ここで「青線の赤線との接点から垂線（緑線）との接点まで」が画像の幅になると考えれるので、ここを40px（background-sizeの幅サイズ）と設定します
  • 三平方の定理から垂線（緑線）の長さは約23px（background-sizeの高さサイズ）となります。

これらの結果から「background-size: 40px 23px;」と設定してみます。

background: repeating-linear-gradient(
  30deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px, /* 色2終了（位置） */
  #fff 20px, /* 色3開始（位置） */ 
  #fff 30px, /* 色3終了（位置） */
  #000 30px, /* 色4開始（位置） */ 
  #000 40px /* 色4終了（位置） */ 
);
background-repeat: repeat;
background-size: 40px 23px;

少し無理やりではありますが、綺麗な斜めストライプになりました。

角度60°

30°とほとんど同じですが、画像について説明します。

  • 青線は0°の時の線です
  • 赤線は60°回転させた後の線です
  • 赤線から青線に垂線（緑線）を引きます
  • ここで垂線（緑線）が画像の高さになると考えれるので、ここを40px（background-sizeの高さサイズ）と設定します
  • 三平方の定理から「青線の赤線との接点から垂線（緑線）との接点まで」の長さは約23px（background-sizeの幅サイズ）となります。

これらの結果から「background-size: 23px 40px;」と設定してみます。

background: repeating-linear-gradient(
  60deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px, /* 色2終了（位置） */
  #fff 20px, /* 色3開始（位置） */ 
  #fff 30px, /* 色3終了（位置） */
  #000 30px, /* 色4開始（位置） */ 
  #000 40px /* 色4終了（位置） */ 
);
background-repeat: repeat;
background-size: 23px 40px;

こちらも少し無理やりではありますが、綺麗な斜めストライプになりました。

角度45°を同じ理屈で試した結果

画像について説明します。

  • 青線は0°の時の線です
  • 赤線は45°回転させた後の線です
  • 赤線から青線に垂線（緑線）を引きます
  • 赤線を40pxと設定します（ここが30°、60°と異なります）
  • ここで「青線の赤線との接点から垂線（緑線）との接点まで」が画像の幅になると考えれるので、
    三平方の定理より約28px（background-sizeの幅サイズ）となります
  • 垂線（緑線）の長さも約28px（background-sizeの高さサイズ）となります。

これらの結果から「background-size: 28px 28px;」と設定してみます。

background: repeating-linear-gradient(
  45deg, /* 角度の指定 */
  #fff, /* 色1開始 */
  #fff 10px, /* 色1終了（位置） */
  #000 10px, /* 色2開始（位置） */
  #000 20px, /* 色2終了（位置） */
  #fff 20px, /* 色3開始（位置） */ 
  #fff 30px, /* 色3終了（位置） */
  #000 30px, /* 色4開始（位置） */ 
  #000 40px /* 色4終了（位置） */ 
);
background-repeat: repeat;
background-size: 28px 28px;

こちらも少し無理やりではありますが、綺麗な斜めストライプになりました。

まとめ

ストライプは30°、45°、60°いずれも綺麗に斜めストライプにはなりましたが、完全な理解とは言えない結果になりました。

勉強のため色々と調べたのですが、設定内容に関する詳細は見つけられませんでした。そのため、いくつか実験してみましたが、上記のとおりです。

あまり納得のいくものではなかったので、今後新しく発見できれば、追加・修正を行いたいと思います。

もし、詳しい方がいらっしゃいましたら、ご教示（コメント）いただけると幸いです。

スポンサーリンク