HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > CSS でレスポンシブデザイン対応の三角形を作る
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
CSS3

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

CSS32017.08.07

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;
}
css-responsive-design-tri-img01

PAGE TOP