CSS で三角形を作る方法

CSS で三角形を作る方法を紹介します。
例えば、画像を使わずに三角形を作りたいときや、CSS だけで吹き出しの先っちょを作りたいときに便利な方法です。
この投稿では clip-path を使った方法と border を使った方法を紹介しています。

1. clip-path で三角形を作る方法
2. border で三角形を作る方法

clip-path で三角形を作る方法

CSS で三角形を作るには、CSS セレクタの clip-path を利用することで実現できます。
実際の見た目はこんな感じです。

ベースの HTML は次の通りです。

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

上向き三角形を作るときの CSS の指定はこちら。

.triangle{

  width: 50px;

  height: 50px;

  background-color: #E91E63;

  clip-path: polygon(0 100%, 50% 0, 100% 100%);

}

各方向だけの指定はこちら。

.top{

  clip-path: polygon(0 100%, 50% 0, 100% 100%);

}

.right{

  clip-path: polygon(0 0, 0 100%, 100% 50%);

}

.bottom{

  clip-path: polygon(0 0, 50% 100%, 100% 0);

}

.left{

  clip-path: polygon(100% 0, 0 50%, 100% 100%);

}

clip-path は、要素の大きさをベースに、指定した図形の形で描画エリアをマスクすることができます。この機能を使い、図形で三角形を描画して、その形で要素を切り取ってみせることで三角形を作ることができます。

例えば、上向きの三角形の場合、clip-path に三点の座標を指定します。
スタートは左下（x0,y100%）、次に上部中央（x50%,y0）、最後に右下（x100%,y100%）。

後半に紹介する border を使った方法との違いは、指定が簡単、三角形以外も作れる、単色以外塗りも可能（例えばグラデーション）、画像が使える点が特徴です。
デメリットとしては、古いブラウザーでは対応してない点が挙げられますが、現状の対応状況を見る限りでは気にする必要はないかと思います。
気になる方は clip-path の対応状況をこちらでご確認ください。

正三角形で作る場合

紹介している方法では正三角形ではなく、少し伸びた形になるため、正三角形で作りたい場合は、要素の大きさの比率を 100：86 ほどに調整して対応してください。
三角形以外の図形を作るときは、外部サービスの「Clippy — CSS clip-path maker」などを利用すると便利です。

border で三角形を作る方法

clip-path 意外にも、CSS セレクタの border を使うことで三角形を作ることができます。
実際の見た目はこんな感じです。

ベースの HTML は次の通りです。

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

下向きの三角形を作るときの CSS の指定はこちら。

.triangle {

  width: 0;

  height: 0;

  border: 30px solid transparent;

  border-top-color: #E91E63;

}

ボーダーは上下左右で交わる箇所が斜めに表示されるので、その特性を利用して三角形を表現します。
使用するのはボーダー要素だけなので width と height を 0 にします。

続いてボーダーサイズとカラーを指定、サイズは任意の値を入れてください。
カラーは一旦 transparent（透明）を指定します。
次に、三角形の向きに合わせてカラーを指定します。
下向きの三角形場合はボーダートップにカラーを指定します、これで完成です。

ボーダーのサイズを上下左右で異なる数値を設定すると、変則的な形の三角形を作ることも可能です。

まとめ

CSS で三角形を作る方法を紹介しました。
一般的に border を使った方法が主流でしたが、対応ブラウザーが増えたことで clip-path を使用する機会も今後増えそうです。