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

ドット区切り線

丸いドットを等間隔に並べた区切り線です。柔らかい印象を出したいブログ記事やプロフィールページの節目に向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-02-dots">
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span><span></span>
          <span></span><span></span>
        </div>

CSS

.d07-05-02-dots{ width:100%; max-width:320px; display:flex; align-items:center; justify-content:space-between; }
        .d07-05-02-dots span{ width:8px; height:8px; border-radius:50%; background:#555; flex:0 0 auto; }
        .d07-05-02-dots span:nth-child(3n){ background:#bbb; width:6px; height:6px; }

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