パーツ番号 02-15-06 ・ CSSのみ

手描き風囲み線バッジ

四角い囲み線が少し歪んだ手描きタッチで描画され文字を囲みます。WordPressの新着ラベルやキャンペーンバッジにカジュアルな手作り感を出せます。

css

プレビュー

ソースコード

HTML

<span class="d02-15-06-badge">
          NEW
          <svg class="d02-15-06-frame" viewBox="0 0 140 56" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="d02-15-06-rect" d="M8,10 C8,7 10,6 14,6 L124,7 C130,7 132,10 132,15 L131,44 C131,49 128,50 122,50 L16,49 C10,49 8,46 8,41 Z" fill="none"/>
          </svg>
        </span>

CSS

.d02-15-06{background:#fefce8}
        .d02-15-06-badge{position:relative;display:inline-block;padding:14px 30px;font-size:20px;font-weight:900;color:#b45309;letter-spacing:2px}
        .d02-15-06-frame{position:absolute;left:0;top:0;width:100%;height:100%}
        .d02-15-06-rect{stroke:#f59e0b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:400;stroke-dashoffset:400}
        .d02-15-06.is-in .d02-15-06-rect{animation:d1806draw 1.2s ease-out forwards}
        @keyframes d1806draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-06-rect{animation:none!important;stroke-dashoffset:0}}

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