【CSS】三角形を作る方法

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

ちょっとしたアイコン等、何かと使用する機会は多いと思います。

サンプル1 上向き

HTML

<div class="triangle1"></div>

CSS

.triangle1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #00d9ff transparent;
}

サンプル2 右向き

HTML

<div class="triangle1"></div>

CSS

.triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent #00d9ff;
}

サンプル3 下向き

HTML

<div class="triangle1"></div>

CSS

.triangle3 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: #00d9ff transparent transparent transparent;
}

サンプル4 左向き

HTML

<div class="triangle1"></div>

CSS

.triangle4 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 50px 0;
  border-color: transparent #00d9ff transparent transparent;
}