CSSで三角形の装飾(吹き出し)をつける

いつも忘れてしまうので忘備録。

よくある“CSSで三角形”は何故できるのか

という事で、簡単なHTMLを用意しました。

<div class="wrap">
	<div class="box">
	ここにテキストが入ります
	</div>
</div>

このHTMLに一旦こちらのCSSを当ててみます。

	/* .wrapは横320pxにしています */
       .box{
		padding: 10px;
		background-color: #ccc;
		margin: 0;
		position: relative;
	}
	.box:after{
		content: '';
		/*absoluteとpositionで外側に配置*/
		position: absolute;
		bottom: -10px;/*padding分*/
		left: 0;
		width: 0;
		border-style: solid;
		border-width: 5px 5px 5px 5px;
		border-color: #ffc #fcf #cff #000;
		
	}

すると↓

このように境目が斜めのボーダーが、width 0pxの要素によってくっついてできるものだそうです。

これのいらない部分を透明にして三角形が出来上がりです。

ソースと結果

吹き出し

.box:after{
		content: '';
		/*absoluteとpositionで外側に配置*/
		position: absolute;
		bottom: -10px;/*padding分*/
		right: 0;
		left: 0;/*左右0+marginで中央配置*/
		margin: auto;
		width: 0px;
		border-style: solid;
		border-width: 10px 10px 0px 10px;/*上半分になります*/
		border-color: #ccc transparent transparent transparent;/* 必要部分以外は透明に */
		
	}

ということで本体部分と色を合わせて完成です。

意外と簡単。

これを応用する事でリボンや矢印も作れます。