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

ジグザグ区切り

三角形の連続で構成した静止したギザギザ罫線です。切り取り線のような見た目で、クーポンやチケット風デザインの仕切りに使えます。

staticcss

プレビュー

ソースコード

HTML

<svg class="d07-05-07-svg" viewBox="0 0 320 20" width="100%" height="20" preserveAspectRatio="none" aria-hidden="true">
          <polyline points="0,20 20,0 40,20 60,0 80,20 100,0 120,20 140,0 160,20 180,0 200,20 220,0 240,20 260,0 280,20 300,0 320,20"
            fill="none" stroke="#555" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
        </svg>

CSS

.d07-05-07-svg{ display:block; max-width:320px; }

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