HTML

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

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

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

CSS で三角形を作る方法

CSS だけで三角形を作る場合は、CSS セレクタの border を使います。
実際の見た目はこんな感じです。

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

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

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

.triangle {
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #E91E63;
}

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

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

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

まとめ

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