パーツ番号 02-13-08 ・ CSSのみ

回転90度の縦積みラベル

横書きテキストを90度回転させて縦に積み重ねた見本です。WordPressのサイドバーの工程インデックスやフローティングラベルに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-13-08-col">
          <span class="d02-13-08-label">DESIGN</span>
          <span class="d02-13-08-label">CODE</span>
          <span class="d02-13-08-label">LAUNCH</span>
        </div>

CSS

.d02-13-08{background:#111827}
        .d02-13-08-col{display:flex;flex-direction:column;gap:16px;align-items:center}
        .d02-13-08-label{display:inline-block;transform:rotate(-90deg);font-size:13px;font-weight:700;letter-spacing:.2em;color:#fbbf24;white-space:nowrap}

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