CSSだけで吹き出し - 闘うITエンジニアの覚え書き

CSSいろいろ > CSSだけで吹き出し

CSSだけで吹き出し †

【コード】

<style type="text/css">
.fukidashi {
	position : relative;
	padding : 10px;
	margin : 20px auto;
	width : 80%;
	background : #cccccc;
	-webkit-border-radius : 10px;
	-moz-border-radius : 10px;
	border-radius : 10px;
	text-align : center;
}

.fukidashi div:after {
	content : "";
	position : absolute;
	bottom : -25px;
	left   : 50px;
	width  : 0px;
	height : 0px;
	border-width : 15px 15px 15px 15px;
	border-style : solid;
	border-color : #cccccc transparent transparent transparent;
}
</style>
<div class="fukidashi"><div>この吹き出しはCSSのみで表現しています</div></div>