ストライプ柄の斜線を自分の任意の細さにしたい

前提・実現したいこと

こういう、シンプルな斜線の下線を引きたいのですが、
うまくいかなくて、質問させていただきました。

https://saruwakakun.com/html-css/reference/border
サルワカさんのサイトを参考にさせて頂きました。

試したこと

html
1<div class="points">
2    <span class="num">100</span>
3    <span class="point">点</span>
4</div>

Sass
1
2$color:#C4CCEB;
3
4.points{ 
5    position: relative;
6    padding-top: 40px;
7  
8    @include sp{
9        height: 129px;
10    }
11 &:after {
12    content: '';
13    position: absolute;
14    left: 50%;
15    transform: translateX(-50%);
16    bottom: -20px;
17    width: 546px;
18    padding: .4em .75em;
19↓↓↓↓こっから下の、数字の微調整だと思うのですが、シンプルな斜線にならなくて悩んでいます
20    background: repeating-linear-gradient(-45deg, #707070, #707070 1px, $color 1px, $color 2px);
21        @include sp{
22            width: 220px;
23            bottom: 20px;
24        }
25    }
26}

↑なんだかじゃぎじゃぎしてしまいます。

もし可能でしたら分解して日本語に直したいのですが、
MDNを見てもなかなかしっくりこなかったので、理解したいです…
background: repeating-linear-gradient(-45deg, #707070, #707070 1px, $color 1px, $color 2px);
-45度で、#707070の斜線を、1px、$color 1px,　$color 2px繰り返す？？？？
ってことになっているんでしょうか。

私は、
‐45度で、#707070　1px　と、$color(＝$color:#C4CCEB;)の3pxくらいの線を交互に並べてもらえれば、それでよいのですが、、

Sass
1(-45deg, #707070, #707070 1px, $color 3px,)

これとも違うようで…
少し混乱中です。

どうしたら、もっとシンプルな斜線になりますでしょうか…
よろしくお願いいたします。

追記

Sass
1 background: repeating-linear-gradient(-45deg, #707070 0px, #707070 1px, $color 1px,$color 4px)

をやってみたところ、

こうなりました！

Lhankor_Mhy

2020/08/08 08:35

モアレじゃないですか？

nomura02

2020/08/08 13:26

なんだかそもそも違うみたいなかんじですよね(;'∀')モアレって言うんですね！ありがとうございます

行動規範の内容に同意します

回答3件

ベストアンサー

90degだときれいな縦線になりますが、-45degにすると太さにばらつきがでるようです。

css
1  background: repeating-linear-gradient(-45deg, #707070 0 1px, #C4CCEB 1px 4px);

そこで、90degにしておいて、transform: skew() で斜体変形してみたら、ましになりました。

css
1  background: repeating-linear-gradient(90deg, #707070 0 1px, #C4CCEB 1px 4px);
2  transform: skew(-45deg);

SVGを使うとさらにましになりました。

html
1<div class="box3">
2  box3
3<svg xmlns="http://www.w3.org/2000/svg" width="80%" height="20px">
4	<defs>
5		<pattern id="pattern_XlHnq" patternUnits="userSpaceOnUse" width="4.5" height="4.5" patternTransform="rotate(45)">
6			<line x1="0" y="0" x2="0" y2="4.5" stroke="#707070" stroke-width="1" />
7		</pattern>
8	</defs>
9	<rect width="100%" height="100%" fill="url(#pattern_XlHnq)" :opacity="1" />
10</svg>
11</div>

投稿2020/08/08 16:21

総合スコア34075

2020/08/10 02:08

ありがとうございます！これをきっかけにSVGへの理解を深めるきっかけにもなりました！ 90degにしておいて、transform: skew() で斜体変形は、私では思い浮かびませんでした・・・たすかりました！！

hatena19

2020/08/10 03:03

gradient や transform での斜線描画は無理やり感があるので、どうしてもきれいにはならない部分が出てきますね。ちなみに、SVGは下記のジェネレータを使いました(;^ω^) SVG STRIPE GENERATOR https://www.coffee-break-designs.com/labs/svg_stripe_generator/

nomura02

2020/08/10 03:09

backgound　repeat-xで作る方法もあるようで・・・でもこれすごく簡単というか・・・便利ですね…もっと早く知りたかったくらいです！ありがとうございます！！

行動規範の内容に同意します

ストライプにする場合は
各線の開始と終了(巾)を入れ、
前の線の終了と、次の線の開始位置を同じにする必要があります。
( 数値2個指定にしないと、明確に色が分かれません )
なので書かれているソースで間違いはないと思いますが。。。

css
1background: repeating-linear-gradient(-45deg, #707070 0 1px, $color 1px 4px);
2

もう少し簡単に書くと ▲ になります

https://millmi.com/2935/
こちらで説明していますので読んでみて下さい

投稿2020/08/08 15:35

編集2020/08/08 15:46

-millmill-

総合スコア676

-millmill-

2020/08/08 15:53

書き忘れましたのでこちらで・・・ repeating-linear-gradientで特に細かいストラブを作った場合、ブラウザやPCスペックなどで多少線にバラ付きでるようです。 (キャッシュされると直る事が多いのですが最初の表示ではなりやすい気がします )

nomura02

2020/08/10 02:06

バラつきが出るということは、存じ上げませんでした・・・ありがとうございます。だいぶ、解決策がわかってきました！！

行動規範の内容に同意します

MDNを確認した限りの解釈です。

・repeating-linear-gradient()は、グラデーション作成を行う関数。
・pxや%などは、幅ではなく、位置を示す。

なので、最初のrepeating-linear-gradient(-45deg, #707070, #707070 1px, $color 1px, $color 2px)は、以下のように解釈される。
-４５度で、#707070で開始位置から1px幅、次が境界線で1px幅、$colorで1px幅で繰り返す。

修正案の、(-45deg, #707070, #707070 1px, $color 3px,)の場合は
-４５度で、#707070で開始位置から1px幅、次から2px分#707070から$colorへのグラデーション。最後の省略に解釈は、不明。

ご希望の斜線は、(-45deg, #707070 0px, #707070 1px, $color 1px,$color 4px)辺りになるかと。

なお、上記は、未検証であることをご了承ください。

投稿2020/08/08 08:35