borderで三角形を描く簡単なCSS

See the Pen 三角形 by チータツ (@cheese_fuji) on CodePen.

CSSの解説

コードを見る

HTML

<p class="up_tri">上向き</p>
<p class="down_tri">下向き</p>
<p class="left_tri">左向き</p>
<p class="right_tri">右向き</p>

CSS

p{
  position: relative;
}

/*** 上向き三角形 ***/
p.up_tri:after{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  /* 三角形の描画 */
  border: 16px solid transparent;
  border-bottom-color: red;
}

/*** 下向き三角形 ***/
p.down_tri:after{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  /*三角形の描画*/
  border: 16px solid transparent;
  border-top-color: red;
}

/*** 左向き三角形 ***/
p.left_tri:after{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  /*三角形の描画*/
  border: 16px solid transparent;
  border-right-color: red;
}

/*** 右向き三角形 ***/
p.right_tri:after{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border: 16px solid transparent;
  border-left-color: red;
}

疑似要素を作成（pタグじゃなくてもOK）
透明なボーダー border: 16px solid transparent で空白で囲い、透明な四角形を作る
向けたい方向と逆側の border-color に色を付ける

何もない空間を border で囲うと隙間のない正四角形になります。borderで作られた四角形は上下左右に配置された三角形で構成されているため、特定の辺に色をつけることで三角形が出来上がります。

応用CSS

borderの特性を活かすことで三角形の形を変えることも可能です。なお、向けたい方向の逆側に色を付けるのは同様です。

正三角形

正三角形を作る場合は高さを決めて、両辺を高さの 1/√3 倍に設定します。（1.73倍ぐらいで大丈夫です）

例えば上向きの三角形であれば、border-bottomで色付きの三角形を描き、border-right, border-left にその 1/1.73 倍の長さの透明な三角形を描きます。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

よほどのこだわりがなければ、あまり使うことはありません

二等辺三角形

上下もしくは左右のペアを斜辺にして、底辺になる border に高さ(h)をセットします。斜辺と高さが 1:2 の比率になるようにしましょう。

See the Pen 二等辺三角形 by チータツ (@cheese_fuji) on CodePen.

砂時計

なんとなく砂時計に見えるよね、という程度のクオリティ。topとbottomに色を付けることで、三角形を二つ並べています。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

border で作る三角形

CSSの解説

応用CSS

正三角形

二等辺三角形

砂時計

おすすめの使い方