吹き出し

吹き出しは中の要素に応じて大きさが変わるようにdisplay: inline-block;を当てておきます。
矢印を絶対配置するため、position: relative;を当てておきます。

吹き出しの矢印部分を作っていきます。
サイズを0にして境界線を引くと、上下左右それぞれの方向を向いた三角形を作ることができます。
一度四方の境界線の色を透明にしてから、希望する向きにのみ後から色を付けます。
配置は親要素からの絶対配置で左右中央になるようにしておきます。

今回は下向き矢印にするため、border-top-colorで色を付けます。
::beforeは境界線の本体です。
要素の下から更に矢印の幅分下にずらして配置します。
::afterを::beforeの上に重ねて境界線を表現します。
配置は境界線の幅分少し上に、色は吹き出し内部の色に合わせます。