どうも！LSSです！！
ブログやWebサイトで使用できる、虹色の区切り線を４種、用意してみました。
虹色区切り線
コード
<div style="background: linear-gradient(90deg,red 0% 13%,orange 16% 27%,yellow 30% 41%,green 44% 55%,lightblue 58% 69%,blue 72% 83%,purple 86% 100%) 0 50%/100% 3px repeat-x;"> </div>
７色、わかれていながらも境目を少しグラデーションでぼかしているタイプの区切り線です。
境目のない虹色グラデーション
コード
<div style="background: linear-gradient(90deg,red,orange,yellow,green,lightblue,blue,purple) 0 50%/100% 3px repeat-x;"> </div>
こちらは、境目なくグラデーションで７色が移り変わっているタイプの区切り線です。
虹色繰り返し区切り線
コード
<div style="background: repeating-linear-gradient(90deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 0 50%/100% 10px repeat-x;"> </div>
こちらは、虹色７色がグラデーションを挟みつつ変化した後、また虹色７色が繰り返されるタイプの区切り線です。
虹色繰り返しドット区切り線
コード
<div style="background: repeating-linear-gradient(90deg,red 0px 9px,transparent 10px 19px,orange 20px 29px,transparent 30px 39px,yellow 40px 49px,transparent 50px 59px,green 60px 69px,transparent 70px 79px,lightblue 80px 89px,transparent 90px 99px,blue 100px 109px,transparent 110px 119px,purple 120px 129px,transparent 130px 139px) 0 50%/100% 10px repeat-x;"> </div>
こちらは「縦横10pxの正方形」が10pxの感覚を開けながら、虹色７色を繰り替えすタイプの区切り線です。
区切り線の太さ・マーカーとしての使用について
４種とも、コードの終盤に、
0 50%/100% 10px repeat-x;
のような記述があります。
このうち、区切り線の太さは「10px」の箇所で指定していて、ここの数値を変更する事で太さを変更する事ができます。
ただし、大きい数値を指定しても１行の高さを超える事はありません。無いと思いますが、もし「100px」などにしたい場合、
0 50%/100% 100px repeat-x;height:100px;
のように別途heightプロパティも指定すると実現可能ではあります。
次に、この「虹色区切り線」をマーカー（文字の下部分に色をつける）として使用したい場合、「50%」の部分を「100%」など大きい数値にする必要があります。
そして、改行にも対応するにはdivタグよりもspanタグにしたほうがよく、太さも調節すると…
サンプル：こんな風になります。
<span style="background: linear-gradient(90deg,red,orange,yellow,green,lightblue,blue,purple) 0 100%/100% 8px repeat-x;">サンプル：こんな風になります。</span>
といった感じですね。
区切り線については、当ブログでは他にも、
【CSS】赤と青の区切り線【小ネタ】 - Little Strange Software
【CSS】赤と青の波線【小ネタの続き】 - Little Strange Software
【CSS】鎖の区切り線【小ネタ】＋α - Little Strange Software
【CSS】菱餅の区切り線【ギリギリの時節ネタ】 - Little Strange Software
など、色々試みていますので、あわせてご確認ください。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
マグエックス ホワイトボード用 線引きテープ 1mm×13m MZ-1 黒
こっそり追記…↓のほうが自然ですよね、の５種類目ｗ
<div style="background: linear-gradient(red,orange,yellow,green,lightblue,blue,purple) 0 50%/100% 14px repeat-x;"> </div>
