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

シンプル罫線バリエーション

実線・破線・点線の3種類の区切り線を並べた見本です。WordPressのセクション区切りや記事内の話題転換の仕切りに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-01-wrap">
          <div class="d07-05-01-line d07-05-01-solid"></div>
          <div class="d07-05-01-line d07-05-01-dashed"></div>
          <div class="d07-05-01-line d07-05-01-dotted"></div>
        </div>

CSS

.d07-05-01-wrap{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:22px; }
        .d07-05-01-line{ width:100%; height:0; }
        .d07-05-01-solid{ border-top:2px solid #333; }
        .d07-05-01-dashed{ border-top:2px dashed #888; }
        .d07-05-01-dotted{ border-top:3px dotted #aaa; }

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