定番
履歴

CSS 吹き出し

CSS 吹き出し

CSSのみで吹き出し(バルーン)を作るサンプルです。

SVGで作る方法もありますが、CSSなので比較的とっかかりやすい印象です。

また、画像を作成する手間も省け、内容が変動する場合に重宝します。

吹き出しサンプル
#balloon1 {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #FFF;
	border: 3px solid #19283C;
	z-index: 0;
	margin: 0 0 20px;
	border-radius: 10px;	
}
#balloon1:before {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #FFF transparent transparent transparent;
	z-index: 0;
}
#balloon1:after {
	content: "";
	position: absolute;
	bottom: -12px; left: 50%;
	margin-left: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
	z-index: -1;
}
吹き出しサンプル
2016-03-23 00:01:05
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top