Edited at

transform:skew()でひし形を作る方法

「CSSでひし形を作る方法」を探すと、正方形を45度回転させる例ばかり見つかって「正方形を回したのがひし形???」と思った人へ。

transform:skew()をどうぞ。


transform:skew()で作るひし形

skew()には(90deg - 欲しい角度) / 2を与えます。


  • ブロックレベル要素は元から内角90degの長方形なので、90degからの差分を指定します。

  • X軸方向・Y軸方向の両方で傾けるので、それぞれに指定する角度は1/2になります。


transform

<div class="diamond"></div>

<style>
.diamond {
display: block;
width: 5rem;
height: 5rem;
background: gray;

transform:
skew(
calc((90deg - 30deg) / 2),
calc((90deg - 30deg) / 2)
); /* calc((90deg - 欲しい角度) / 2) */
}
</style>


transform:skew()で作るひし形


作ったひし形を回転させる

向きを変えるときは、傾ける前にrotate()すると良いようです。(ノウハウ)


作ったひし形を回転させる

<div class="diamond"></div>

<style>
.diamond {
display: block;
width: 5rem;
height: 5rem;
background: gray;

transform:
rotate(45deg)
skew(
calc((90deg - 30deg) / 2),
calc((90deg - 30deg) / 2)
); /* calc((90deg - 欲しい角度) / 2) */
}
</style>


作ったひし形を回転させる