CSSで文字を斜め45°傾ける方法

こんにちは、さるまりんです。

今回はCSSの小ネタです。サイト構築やその他いろんなことをやりながら「こんな風にしたらできた〜」というものを記録していきたいと思います。よければお付き合いください。

本題。文字を斜めに傾けて表示する方法です。

文字を入力してたら→とか←とか↑とか↓とかは入力できるんだけど、ちょうどその間、斜め45°みたいなのが表示できないんです。どうしよう。

これをcssで実現する方法をメモっておきます。

ズバリこんな感じです。

以下のスタイルを用意。

/* 右斜め45度 */
span.rotate45 {
    display: inline-block;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

そして斜め45°に傾けたい文字をclass="rotate45"を適用した<span></span>で囲むことで対象をを傾けて表示することができます。

↑を<span class="rotate45">↑</span>とすることで、を表示することができます。

おお!意外に簡単にできました。

←を<span class="rotate45">↑</span>とすることで、も表示することができますね。

どちらにも矢印向け放題です。

注意点としてはdisplay:inline-block;にしておかないとこのスタイルは効かないようです。
transform、面白いですね。時間をみつけていろんな実験の結果をまたお伝えさせてください。

読んでくださってありがとうございます。

ではまた!