CSS - 平行四辺形

HTMLとCSSで平行四辺形を描画するコード例です。

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

<div class="parallelogram"></div>

平行四辺形の形状にするために、四角形の要素を「transform」プロパティに「skewX」を指定して傾けています。
「skewX」で指定する単位は角度となる「deg」で「0」がデフォルトとなっています。
また、マイナスの値を指定する事で逆向きに傾いた平行四辺形を作成する事ができます。

.parallelogram {
	width: 200px;
	height: 200px;
	transform: skewX(25deg);
	background: lightskyblue;
}