DOE HOME > Web技術Tips > CSS3 > CSS でレスポンシブデザイン対応の三角形を作る

category_06_m

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

Pocket

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
Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. Google Mapがエラーで表示されなくなった場合の直し方
  2. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  3. 無料で使える明朝体の日本語WEBフォント
  4. CSS Table displayについて見直してみる
  5. SNSのシェアボタンを自前のコードで設置する際のリンク設定まとめ

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。