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

囲み枠装飾(角の飾り付き)

細い囲み枠の四隅にアクセントカラーの飾りを重ねたデザインです。特典やキャンペーン情報を目立たせる囲み枠として使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-10-box">
          <span class="d07-05-10-corner d07-05-10-tl"></span>
          <span class="d07-05-10-corner d07-05-10-tr"></span>
          <span class="d07-05-10-corner d07-05-10-bl"></span>
          <span class="d07-05-10-corner d07-05-10-br"></span>
          <p class="d07-05-10-txt">SPECIAL</p>
        </div>

CSS

.d07-05-10-box{ position:relative; width:200px; height:120px; border:1px solid #ccc; display:flex; align-items:center; justify-content:center; }
        .d07-05-10-corner{ position:absolute; width:14px; height:14px; border:3px solid #b8860b; }
        .d07-05-10-tl{ top:-3px; left:-3px; border-right:none; border-bottom:none; }
        .d07-05-10-tr{ top:-3px; right:-3px; border-left:none; border-bottom:none; }
        .d07-05-10-bl{ bottom:-3px; left:-3px; border-right:none; border-top:none; }
        .d07-05-10-br{ bottom:-3px; right:-3px; border-left:none; border-top:none; }
        .d07-05-10-txt{ margin:0; font-size:.8rem; letter-spacing:.2em; color:#555; }

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