CSSだけでひし形(ダイヤモンド)を作る方法

画像を使わずに、CSSだけでひし形(ダイヤモンド)を作る方法をご紹介いたします。

要素を傾けることで、簡単にひし形を実現することが可能です。

CSSだけでひし形(ダイヤモンド)を作る方法

CSSだけでひし形を作成するには、まずHTMLで以下のようにマークアップします。

<div class="diamond">
  <div class="diamond-inner">1</div>
</div>

全体を.diamondで包括し、ひし形の中にテキストなどを入れる際は、.diamond-innerの中に記述します。

CSSは以下のようにします。

.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度傾けることで、ひし形を表現しているだけですね。簡単に実装できるので、ひし形のデザインをコーディングする時は、ぜひ参考にしてください。