CSS - ひし形

HTMLとCSSでひし形を描画するコード例です。

HTML要素には、ひし形の要素となる<div>タグにクラス名 "rhombus" を設定しています。

<div class="rhombus"></div>

このCSSコード例では、「transform」プロパティに「rotate」を指定して回転、「skew」を指定して傾斜変形させて、ひし形を形成しています。
「rotate」「skew」ともに単位は角度「deg」で指定しますが、「skew」の値が大きいほど尖った形状になります。

.rhombus {
	width: 200px;
	height: 200px;
	transform: rotate(45deg) skew(10deg, 10deg);
	background: royalblue;
}