どうも！LSSです！！
昨日の記事に色々とコメントをいただき、ありがとうございます^^
制作意欲を刺激するコメントが特に多くて助かりますｗ
と、いうわけで、こんな感じの波線マーカーが出来ました！ ⛵ ⛵ ⛵
波線マーカー
サンプル
サンプルです
コード
<span style="background-image: linear-gradient(188deg,transparent 60%,lightblue 60%),linear-gradient(172deg,transparent 60%,lightblue 60%); background-size: 1.8em; background-repeat: repeat-x;"> サンプルです </span>
CSS解説
まず、サンプルのコードのCSS部分を、分かりやすいように改行をいれますね。
background-image:
linear-gradient(188deg,transparent 60%,lightblue 60%),
linear-gradient(172deg,transparent 60%,lightblue 60%);
background-size: 1.8em;
background-repeat: repeat-x;
冒頭の３行、
background-image:
linear-gradient(188deg,transparent 60%,lightblue 60%),
linear-gradient(172deg,transparent 60%,lightblue 60%);
background-imageはこのように,（カンマ）区切りで複数の指定を重ねる事ができます。
そこで、昨日の記事で扱った「斜めマーカー」の、傾きが「左肩上がりのもの」と「右肩上がりのもの」を重ねています。
これでまずは、２種類の傾きを出す用意が出来ました。
background-size: 1.8em;
背景画像のサイズを指定する、background-sizeというプロパティがあります。
（この場合、画像ではなくてグラデーション指定ですが、画像と同様に扱われます。）
emは文字サイズと同じサイズを指定する単位で、「1.8em」は「1.8文字分」のサイズを指定した事になります。
これが「一つの波の幅」という事になります。
background-repeat: repeat-x;
最後にrepeat、つまり繰り返しの方向の指定です。
今回は横方向に繰り返すのでrepeat-xと指定しています。
アレンジ方法について
<span style="background-image: linear-gradient(188deg,transparent 60%,lightblue 60%),linear-gradient(172deg,transparent 60%,lightblue 60%); background-size: 1.8em; background-repeat: repeat-x;"> サンプルです </span>
上記コードのうち、オレンジ色の188degと172degで波の傾きっぷりを調整します。
（「180」を中心に対象になるようにする事で波が繋がります。）
赤文字の60%は波の低さで、小さくすると波が高くなり、大きくすると波が低くなります。
また、「transparent」の後の数値を「lightblue」の後の数値より小さくすると、その差分はグラデーションによりぼやけた感じになります。
lightblueの部分が色を指定している部分です。redやorangeやyellowなどの色名で指定してもいいですし、#ffaabbのようなRGB形式の指定でも、hsl(50,50%,100%)のようなHSL形式の指定でもOKです^^
※拙作のカラーパレット、HSL版 ・RGB版 で好きな色を探せます。（過去記事宣伝ｗ）
1.8emがひとつの波のサイズ（幅）を指定している部分です。
数値を小さくすると波長の短い波に、大きくするとのんびりした波になります。
が、この幅を変更する事によって、波の傾きによる見た目も変わってしまうので、あわせて再調整が必要かも。
色々アレンジ
２つの波の色を変えるのもありそう！
<span style="background-image: linear-gradient(220deg,transparent 60%,pink 60%),linear-gradient(140deg,transparent 60%,lightblue 60%); background-size: 0.8em; background-repeat: repeat-x; font-weight: bold;"> ２つの波の色を変えるのもありそう！ </span>
文字が読みづらくなったら、text-shadowの併用も良さげ
<span style="background-image: linear-gradient(185deg,transparent 65%,#AC6A00 70%,#AC6A00 85%,transparent 85%),linear-gradient(175deg,transparent 65%,#D4987E 70%,#D4987E 85%,transparent 85%); background-size: 3em; background-repeat: repeat-x; font-weight: bold; text-shadow: 1px 1px 0px white;"> 文字が読みづらくなったら、text-shadowの併用も良さげ </span>
あえて傾き度合いをずらしても面白いかも
<span style="background-image: linear-gradient(210deg,transparent 60%,orange 65%,transparent 70%),linear-gradient(165deg,transparent 60%,orange 65%,transparent 70%); background-size: 0.8em; background-repeat: repeat-x; font-weight: bold;"> あえて傾き度合いをずらしても面白いかも </span>
なんか…色々と試していると、この「linear-gradientを重ねる」事によって、他の可能性まで出てきてしまいました！（いきあたりばったりで記事を書いておりますｗｗｗ）
ちょっと奥が深すぎますね、CSS^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
