画像を使わずに、CSSだけでひし形(ダイヤモンド)を作る方法をご紹介いたします。
要素を傾けることで、簡単にひし形を実現することが可能です。
CSSだけでひし形(ダイヤモンド)を作る方法
CSSだけでひし形を作成するには、まずHTMLで以下のようにマークアップします。
1 2 3 | <div class="diamond"> <div class="diamond-inner">1</div></div> |
全体を.diamondで包括し、ひし形の中にテキストなどを入れる際は、.diamond-innerの中に記述します。
CSSは以下のようにします。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | .diamond { width: 45px; height: 45px; background: #2d2929; transform: rotate(45deg); overflow: hidden; margin: 0 auto;}.diamond-inner { font-size: 20px; line-height: 45px; color: #fff; background: transparent; transform: rotate(-45deg); text-align: center;} |
.diamondでサイズや背景色を決めて、rotateで要素を傾けます。.diamond-innerでは.diamondとは逆向きに傾けて、中の要素が水平になるよう傾きを戻しています。
上記のように記述することで、以下のようにひし形を作ることができます。
あとがき
四角形を45度傾けることで、ひし形を表現しているだけですね。簡単に実装できるので、ひし形のデザインをコーディングする時は、ぜひ参考にしてください。