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

アイコン付き区切り線

罫線の中央に小さな星形アイコンを配置した装飾です。フォトギャラリーや実績紹介の区切りに華やかさを添えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-04-wrap">
          <span class="d07-05-04-line"></span>
          <svg class="d07-05-04-icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <path d="M12 2l2.4 7.2H22l-6 4.6 2.3 7.2L12 16.4 5.7 21l2.3-7.2-6-4.6h7.6z" fill="#999"/>
          </svg>
          <span class="d07-05-04-line"></span>
        </div>

CSS

.d07-05-04-wrap{ width:100%; max-width:320px; display:flex; align-items:center; gap:14px; }
        .d07-05-04-line{ flex:1; height:1px; background:#ccc; }
        .d07-05-04-icon{ flex:0 0 auto; display:block; }

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