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

手描き丸囲みハイライト

キーワードの周囲に手描き風の楕円がぐるっと描かれ注目を集めます。WordPressの料金表や比較表で一番おすすめのプランを目立たせるのに向いています。

css

プレビュー

ソースコード

HTML

<div class="d02-15-03-wrap">
          <span class="d02-15-03-word">重要ポイント</span>
          <svg class="d02-15-03-circle" viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="d02-15-03-ring" d="M12,38 C12,14 40,6 100,6 C165,6 190,16 188,38 C186,58 150,64 100,64 C46,64 14,58 12,38 Z" fill="none"/>
          </svg>
        </div>

CSS

.d02-15-03{background:#fff}
        .d02-15-03-wrap{position:relative;display:inline-block;padding:14px 10px}
        .d02-15-03-word{position:relative;z-index:1;font-size:22px;font-weight:800;color:#111827}
        .d02-15-03-circle{position:absolute;left:0;top:0;width:100%;height:100%}
        .d02-15-03-ring{stroke:#ef4444;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:420;stroke-dashoffset:420}
        .d02-15-03.is-in .d02-15-03-ring{animation:d1803draw 1.4s ease-out .2s forwards}
        @keyframes d1803draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-03-ring{animation:none!important;stroke-dashoffset:0}}

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