CSSで台形を描く

Html&CSSで台形を描く方法です。

ソースコード

<div class="trapezoid"></div>

<style>

.trapezoid {
	width: 200px;
	border-bottom: 100px solid darkturquoise;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	box-sizing: border-box;
}

</style>

説明

divのborder部分で台形を作っています。

width:300pxで幅が決まり、border-bottom:150pxで高さが決まり、全体は300x150サイズとなります。border-bottom部分だけが台形の実体です。

border-bottomだけしか設定しないとただの長方形になってしまうのでborder-leftとborder-rightを設定することで斜めの線を実現しています。

なぜ斜めになるのか不思議ですが、隣接する二辺のborderが設定された場合、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられるので、斜めにカットされて表示されるわけです。

leftとrightのborderの色をtransparentにすることで黒い部分を透明にして完成です。