吹き出しみたいな三角のついた見出しデザインをCSSで実装してみた

こんなの作ってみました。
ページのちょっとしたアクセントに・・・。

サンプルページ

HTML

今回はdlタグ使ってみました。

<dl class="fukidashi">
  <dt>ここに何か</dt>
  <dd>そしてその後にここに何かが入るのです！</dd>
</dl>

CSS

.fukidashi {
	margin:20px 0;
}
.fukidashi dt {
	position: relative;
	color: #fff;
	font-weight:bold;
	float:left;
	clear:both;
	padding:10px 15px;
	background-color: #DE3737;
}
.fukidashi dd {
	padding:10px 30px;
	display:inline-block;
	background-color:#F8F8F8;
	margin:0;
}
.fukidashi dt::after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-width: 10px;
	margin-top: -10px;
    border-left-color: #DE3737;
}