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

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

transform:skew()をどうぞ。

transform:skew()で作るひし形

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

• ブロックレベル要素は元から内角90degの長方形なので、90degからの差分を指定します。
• X軸方向・Y軸方向の両方で傾けるので、それぞれに指定する角度は1/2になります。

transform:skew()で作るひし形

<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>

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

向きを変えるときは、傾ける前に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>