パーツ番号 07-05-06 ・ CSSのみ

二重線区切り

太さの異なる2本の線を近接させた区切りです。上品で落ち着いた印象を与えたい会社案内ページなどの仕切りに向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-06-wrap">
          <span class="d07-05-06-line d07-05-06-thick"></span>
          <span class="d07-05-06-line d07-05-06-thin"></span>
        </div>

CSS

.d07-05-06-wrap{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:4px; }
        .d07-05-06-line{ width:100%; background:#444; }
        .d07-05-06-thick{ height:3px; }
        .d07-05-06-thin{ height:1px; background:#999; }

クラス名 .d07-05-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。