transform:skew()でひし形を作る方法 - Qiita「CSSでひし形を作る方法」を探すと、正方形を45度回転させる例ばかり見つかって「正方形を回したのがひし形？？？」と思った人へ。 transform:skew()をどうぞ。 transform:skew()で作るひし形 skew()には(90deg - 欲しい角度) / 2を与えます。 ブロックレベル要素は元から内角90degの長方形なので、90degからの差分を指定します。 X軸方向・Y軸方向の両方で傾けるので、それぞれに指定する角度は1/2になります。 <div class="diamond"></div> <style> .diamond { display: block; width: 5rem; height: 5rem; background: gray; transform: skew( calc((90deg - 30deg) / 2), calc((90deg - 30d
