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

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

CSSだけでひし形(ダイヤモンド)を作る方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

画像を使わずに、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とは逆向きに傾けて、中の要素が水平になるよう傾きを戻しています。

上記のように記述することで、以下のようにひし形を作ることができます。

CSSだけでひし形(ダイヤモンド)

あとがき

四角形を45度傾けることで、ひし形を表現しているだけですね。簡単に実装できるので、ひし形のデザインをコーディングする時は、ぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。