Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

CSSで平行四辺形を描く

Html + CSSで平行四辺形を描く方法。

css_平行四辺形

ソースコード

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

<style>

.parallelogram {
	width: 200px;
	height: 100px;
	transform: skew(-30deg);
	-moz-transform: skew(-30deg);
	-webkit-transform: skew(-30deg);
	-o-transform: skew(-30deg);
	-ms-transform: skew(-30deg);
	background: crimson;
	margin-left: 100px;
}
</style>

説明

200x100の長方形型のdivをtransform属性のskewで変形させることにより平行四辺形を実現しています。

skew(-30deg)とすることで水平方向に30度傾きます。skew(30deg)とすると逆方向に傾きます。

css_平行四辺形2

参考リンク