CSS でレスポンシブデザイン対応の三角形を作る

border-width の単位に % は使えないので、ブラウザの幅によって border の幅を変えるのってできないですよね。

そして、これは border で作成した三角形にも言えることです。

ただ、border-width の単位を % でなく vw や vh に変えると使えるようです。

HTML

<div id="triangle"></div>

CSS

#triangle {
	width: 0;
	height: 0;
	border-top: 16vw solid transparent;
	border-right: 20vw solid #000;
	border-bottom: 16vw solid transparent;
}