CSSで斜めのストライプを作りたい。45degの斜めの線ではなくて、47degの斜めの線を作りたいのだが、線がギザギザになってしまう。

Question

以下のサイトを見ながらCSSで斜めのストライプを作ろうとしています。
https://beginners-high.com/css-stripe/

ここには以下のコードがあり、これをコピペすれば、CSSで斜めのストライプが作れます。

<div class="stripe"></div>

.stripe {
    height: 300px;
    background: repeating-linear-gradient(45deg, #fb3 0, #fb3 20px, #58a 20px, #58a 40px);
}

このサイトのコードでは、斜めを指定するのに、「45deg」を指定しているのですが、今回、私は「45deg」ではなく、「47deg」で斜めのストライプを作りたいと考えています。

けれど、このコードの斜め設定を「45deg」から「47deg」に変えると、斜め線は厳密な直線というよりは、のこぎりのように、多少ギザギザした線になってしまいます。
このようなギザギザ線ではなく完全に一直線な線を作りたいのですが、どのようにすれば一直線になるのでしょうか？

あるいはCSSの性質上、このようなギザギザ線になってしまうのも仕方がないのでしょうか。
ご教授、よろしくお願いします。

Comments

[ikedas]

ほかの角度、たとえば「60deg」「62deg」「75deg」「90deg」なんかも試してみるとどうでしょうか。

[cheshire-cat]

お返事ありがとうございます。

45deg、47deg以外にもいろいろ試していますが、やはりギザギザになるのが気になります。
もともと45degですら、多少はギザギザしていると言えなくもありませんね。
ですからそれ以外の角度がもっとギザギザしていても仕方がありません。

とはいえ、もっと滑らかな線の引き方があるのではないかと思い、質問させていただきました。
CSSの性質上、これ以上滑らかにならないのであれば、仕方ないことと諦めるしかありませんね。

Answer 1

色経由点にすき間を空けるといい感じになる場合があります。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/v4h9ry31/

Comments

[cheshire-cat]

ありがとうございます！
参考にします！！

Answer 2

質問者さんにも確認していただいた通り、斜めの線は角度によって程度の差こそあれぎざぎざになりますよね。これはCSSの特性というより、CSSが前提としているコンピュータのディスプレイの仕組みによります。

ぎざぎざしている画面を、もっと近づいてよく見てみてください。色のついた四角が並んでいるのがわかると思います。ひとつひとつの四角は正方形だったり長方形だったりするかもしれませんが、詳しくみるとそれぞれの四角の中が3色に塗り分けられているのもわかるかもしれません。

この四角のひとつひとつを「ピクセル」と言います。コンピュータのディスプレイではこのピクセルですべての画像を表示します。逆にいうと、このピクセルより細かいものは表示できません。

並んだ四角で、いろんな角度の図形を表示することを考えてみてください。線の傾きが0度や90度なら、直線が表示されます。45度なら、ぎざぎざはありますが斜めの線が見えます。しかしこれ以外の半端な傾きの線では、ぎざぎざがよりまばらになって目立ってしまいます。

このため、47度といった傾きの線では、ぎざぎざが目立ってしまうのです。

Comments

[cheshire-cat]

ありがとうございます。
ディスプレイだから仕方がないことなのですね。
それでしたらやむを得ないことと納得して先に進めます。
長文での回答ありがとうございました。

[ikedas]

ソフトによってはアンチエイリアシングのような手法を使ってぎざぎざの目立たない表示をするものもあったりしますが、個々のソフトの機能なのでCSSで実現できるものではないですね。
https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%B3%E3%83%81%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9

……と書いていたら、Lhankor_Mhyさんの回答が。