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

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

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

 .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の組み合わせで調整する。