どうも！LSSです！！
またしても、区切り線CSSネタです。
鎖の区切り線
コード
<style>
.chain{
height:20px;
background:
radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px
,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#eeeeee 73%,#666666 96%,#66666600 100%) 0px 0px/22px 20px
,radial-gradient(10px 10px at 50% 100%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px
;
}
</style>
<div class="chain"> </div>
もしくは、
<div style="height: 20px; background: radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#eeeeee 73%,#666666 96%,#66666600 100%) 0px 0px/22px 20px,radial-gradient(10px 10px at 50% 100%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px;"> </div>
コードが２種ありますが、
前者は「クラス名を指定して、styleタグから装飾を指定している」、
後者は「タグ内のstyleオプションで装飾を指定している」
だけの違いで、内容的には同じものです。
参考：CSS超入門！…のさわりだけ！！ - Little Strange Software
radial-gradientを３つ使用して、２つの円を描いています。
「３つで２つ？」というのは、「鎖として繋がっているように見えるように、１つの円を挟むように、手前に描画する半円、奥に描画する半円」で囲んでいるためで、コード中でいうと、
radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px
,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#eeeeee 73%,#666666 96%,#66666600 100%) 0px 0px/22px 20px
,radial-gradient(10px 10px at 50% 100%,#66666600 46%,#666666 50%,#dddddd 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px
青文字部分が２つの半円、赤文字部分が挟まれた円、という事になります。
また、どちらの円も「73%」の部分に当たるところが、鎖の円のメイン色となっており、「#dddddd」と「#eeeeee」どちらもグレーですが微妙に濃さを変えています。
これを例えば「#ffff00」と「#ffdd22」に変えてみると、
と、黄色っぽい鎖になります^^
<div style="height: 20px; background: radial-gradient(10px 10px at 50% 0%,#66666600 46%,#666666 50%,#ffff00 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px,radial-gradient(10px 10px,#66666600 46%,#666666 50%,#ffdd22 73%,#666666 96%,#66666600 100%) 0px 0px/22px 20px,radial-gradient(10px 10px at 50% 100%,#66666600 46%,#666666 50%,#ffff00 73%,#666666 96%,#66666600 100%) 11px 10px/22px 20px;"> </div>
【＋α】区切り線ではなく背景にしてみると…？
コード中で「 height: 20px; 」と指定しています。
これが高さを20ピクセルに指定しているため、高さが限定された横長のものとして表示されていますが、例えばこれを「 height: 200px; 」と10倍にしてやると…？
なんだか、セーターやマフラーの編み目っぽい模様になりましたね^^
終わりに
今回のネタは、
に いただいたコメント、
から、逆転の発想（あまのじゃく？ｗ）で、逆に硬い感じだったら…と思いつきました。
mio様、ありがとうございます^^
（あ、でも最終的にセーターやマフラーって柔らかいものに戻ってましたｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
波線ですとやわらかな感じがしますね。