CSSを使ってHTMLのdiv要素の下部中央に三角形を配置する方法

CSSでdivの下部中央に三角形を配置する方法

Webデザインでは、ツールチップや吹き出し、バナーの装飾などに「下向きの三角形」を要素の下端中央に配置したいケースがよくあります。画像を使用せず、CSSの擬似要素とボーダー（枠線）の仕組みを利用すれば、簡単にこの三角形を実現できます。

基本的な考え方

ポイントは以下の2つです。

• 三角形は::after擬似要素を使って描画します。border-top・border-left・border-rightを組み合わせることで、画像なしの三角形を作れます。
• 左右方向の中央揃えにはleft: 50%を指定し、さらに三角形の幅の半分だけ左へ戻すためにmargin-left: -50pxを設定します。

実装コード

親要素（div）にposition: relative;を設定した上で、次のように記述します。

.demo::after {
    position: absolute;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
}

コードの解説

border-top: solid 50px #e15915; … 三角形の本体となる部分です。ここで指定した色が三角形の色になります。

border-left / border-right: transparent; … 左右に透明な境界線を置くことで、上辺の境界線が下向きの三角形として見えるようになります。

top: 100%; … 擬似要素を親要素の下端（高さ分ちょうど下）に配置します。

left: 50%; margin-left: -50px; … まず要素の左端を中央に合わせ、その後、三角形全体の幅（50px + 50px = 100px）の半分である50pxだけ左にずらすことで、完全な中央揃えになります。

width: 0; height: 0; … 要素自体のサイズをゼロにし、三角形はボーダーだけで構成されるようにしています。

まとめ

このテクニックを使えば、CSSのみでdivの下部中央にきれいに配置された三角形を作成できます。サイズや色を変更したい場合は、borderの各値を調整するだけで対応でき、margin-leftの値も「左右のborder幅の合計÷2」に合わせて変更することを忘れないようにしましょう。