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

装飾コーナー飾り

四隅に短いL字の線を配置したフレーム風の装飾です。証書や特典案内など、内容を額縁のように囲みたい場面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-08-frame">
          <span class="d07-05-08-corner d07-05-08-tl"></span>
          <span class="d07-05-08-corner d07-05-08-tr"></span>
          <span class="d07-05-08-corner d07-05-08-bl"></span>
          <span class="d07-05-08-corner d07-05-08-br"></span>
          <p class="d07-05-08-txt">CORNER FRAME</p>
        </div>

CSS

.d07-05-08-frame{ position:relative; width:200px; height:130px; display:flex; align-items:center; justify-content:center; }
        .d07-05-08-corner{ position:absolute; width:20px; height:20px; border:2px solid #444; }
        .d07-05-08-tl{ top:0; left:0; border-right:none; border-bottom:none; }
        .d07-05-08-tr{ top:0; right:0; border-left:none; border-bottom:none; }
        .d07-05-08-bl{ bottom:0; left:0; border-right:none; border-top:none; }
        .d07-05-08-br{ bottom:0; right:0; border-left:none; border-top:none; }
        .d07-05-08-txt{ font-size:.75rem; letter-spacing:.15em; color:#888; margin:0; }

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