CSSで斜線が途切れないようにする方法

関連ページ このサイトと、あともう一つ運営してる英語勉強サイトでは、45度傾けた斜線を組み合わせてクロス模様を配置しています。
しかしこの斜線が曲者で、当初は繰り返し模様では上手く繋がりませんでした。
しばらく悩みましたが、最終的にbackground-sizeで模様の大きさを適切に計算することで解決が出来ました。 まず最初に、斜めにせず線を垂直と水平に交差させたクロス模様は下のようなコードになります。

degを指定しない水平の線と、90度に傾けた垂直線を組み合わせてクロス模様を作っています。
background-sizeには、repeating-linear-gradientが透明部分30px+色線2pxなので、合計32pxを指定して繰り返し模様を作っています。
この２つの線をシンプルに45度ずつ傾けてみます。コードと結果は下の通り。
この時点で何かおかしいです。ちゃんとクロス模様の反復になっていません。
反復処理がおかしいということは、たぶんbackground-sizeのピクセル値の指定が間違ってるのだろうと思い、山勘で調整していきました。
少し近づいたので更に調整。
最終的に45pxを指定することでぴったりクロス模様になりました。 しかし斜線の模様を作るたびに、毎回山勘でbackground-sizeを調整していくのはかなりしんどいです。
32pxでぴったりなはずが45px必要なのは、何か理由があって方程式もあるはずだと思いました。
大昔の数学の記憶を掘り起こして、斜線に関する重要な情報はないかと考え、そういえば√があったなと思い出しました。
たとえば横1cm、縦1cmの正方形があるとして、その対角線は数学では√2cmとなります。

√2は無限小数で1.41421356...と続いていきますが、あんまり細かい端数はここではどうでも良いと思いました。
つまり正方形の一片のサイズx1.4をすると、だいたい斜線の長さということになります。
32 x 1.4 = 44.8なので、たしかに45pxに近いです。
本当にこの計算式が正しいのか、もう少し複雑な模様を作って試してみました。
下のコードは透明部分が40pxと20pxの2パターンあり、線もオレンジが4px、水色が2pxと複雑になっています。
66 x 1.4 = 92.4という計算。
結果は下の通りで、想定通りの挙動になっていました。

ただしこの1.4という数字はあくまで正方形の模様でかつ45度の斜め線を前提としたものなので、他だとまた違ってくると思います。