パーツ番号 05-06-12 ・ CSSのみ

アイコンバッジ重なりカード

カード上端に丸いアイコンバッジを半分はみ出させて重ねた構成です。WordPressのおすすめ会員ランクや受賞歴の演出カードに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-06-12-card">
          <span class="d05-06-12-badge">★</span>
          <h4 class="d05-06-12-title">プランL</h4>
          <p class="d05-06-12-desc">上端にアイコンバッジが半分重なる構成です。</p>
        </div>

CSS

.prev.d05-06-12{padding:28px 20px 20px}
        .d05-06-12-card{position:relative;width:100%;max-width:240px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:26px 20px 20px;text-align:center;box-sizing:border-box}
        .d05-06-12-badge{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 6px 14px rgba(245,158,11,.35)}
        .d05-06-12-title{margin:0 0 8px;font-size:16px;font-weight:700;color:#1f2937}
        .d05-06-12-desc{margin:0;font-size:12.5px;line-height:1.7;color:#6b7280}

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