コーディングをしているとよく使うけど、書き方をすぐ忘れるコードがあるのでメモしておく。

上記のような吹き出し型のブロックについて、あるブロック要素の中央下部に三角形を配置したい場合がある。

この場合のコード（SCSS）は以下のとおり。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
.parentBlock {
    $elemColor: #f4f8f4; // 要素の色
    position: relative;
    background: $elemColor;
    &::after {
        $size: 24px; // 三角形のサイズ
        position: absolute;
        bottom: -($size*2);
        left: 50%;
        margin-left: -($size);
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-top: $size solid $elemColor;
        border-bottom: $size solid transparent;
        border-left: $size solid transparent;
        border-right: $size solid transparent;
    }
}

三角形は疑似要素タグafterを使う。

三角形を表示させるポイントとなるコードはborderの付け方。
今回の例のように下向き三角の場合はtopにのみborder-colorを指定し、その他方向のborderにはtransparentを指定する。

中央配置については、leftとmargin-leftの組み合わせで調整する。