CSSだけで簡単に三角形を作る方法

CSSだけで三角形を作る方法を紹介します。

画像を使ってもいいのですが、CSSを使用することにより少しだけ軽くすることができます。
また、あとから色やサイズの調整が必要になった際も、コードを少しいじるだけで簡単に修正することができます。

IEも7までは対応しているので、特に問題ないはず。

正三角形

まずは正三角形です。
色やサイズは用途に合わせて調整してください。

上向き正三角形

CSS

.triangle-1 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #1E90FF;
}

HTML

<div class="triangle-1"></div>

右向き正三角形

CSS

.triangle-2 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #1E90FF;
  border-bottom: 50px solid transparent;
}

HTML

<div class="triangle-2"></div>

左向き正三角形

CSS

.triangle-3 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #1E90FF;
  border-bottom: 50px solid transparent;
}

HTML

<div class="triangle-3"></div>

下向き正三角形

CSS

.triangle-4 {
  width: 0;
  height: 0;
  border-top: 50px solid #1E90FF;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

HTML

<div class="triangle-4"></div>

二等辺三角形

次に二等辺三角形の作り方です。
どちらかというと、正三角形とりはこちらのほうが使う機会が多いかも。

上向き二等辺三角形

CSS

.triangle-5 {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 50px solid #1E90FF;
}

HTML

<div class="triangle-5"></div>

右向き二等辺三角形

CSS

.triangle-6 {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 50px solid #1E90FF;
  border-bottom: 40px solid transparent;
}

HTML

<div class="triangle-6"></div>

左向き二等辺三角形

CSS

.triangle-7 {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-right: 50px solid #1E90FF;
  border-bottom: 40px solid transparent;
}

HTML

<div class="triangle-7"></div>

下向き二等辺三角形

CSS

.triangle-8 {
  width: 0;
  height: 0;
  border-top: 50px solid #1E90FF;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}