LINEのような吹き出しをCSSで簡単に出来る方法を試してみました

2015年05月25日（Mon）

簡単にLINEのような吹き出しを作れないか調べているとSpeech Bubbleというプラグインがあることが分かりました。コメントリストに応用しようかと考えたのですが、不具合の報告などもあり面倒そうなので却下し他の方法を模索…

更に探していると縦型の吹き出しをCSSで簡単にできるとの記事を発見！何とか横型の吹き出しに出来ないものかと色々と試していたら出来たので忘れないうちに早速メモ書きです。

矢印の三角形の部分はborderを使用

下記のサンプルは、縦型の吹き出しになります。
三角形の部分は、before擬似要素に空のcontentプロパティをborderで囲んだものになります。

分かりやすいようにborderのtopを赤、leftを緑、rightを青にしてみました。

CSS

.balloon-sample{
	position:relative;
	background-color:#e4e8eb;
	color:#36393d;
	margin:15px;
	padding:10px;
	text-align:center;
}
.balloon-sample:before {
	content:"";
	position:absolute;
	bottom:-10px;
	left:50%;
	margin-left:-10px;
	width:0;
	height:0;
	border-top:10px solid #FF0000;
	border-left:10px solid #008000;
	border-right:10px solid #0000FF;
}

縦型の吹き出し

border-topの逆三角形のみ使いたいので、border-topをテキスト背景と同色に設定します。
使わないborder-left、border-rightは、transparentで透明を指定して縦型の吹き出しは完成です。

縦型の吹き出しはこんな感じです。

html

<p class="balloon-bot">縦型の吹き出しはこんな感じです。</p>

CSS

.balloon-bot{
	position:relative;
	background-color:#e4e8eb;
	color:#36393d;
	margin:15px;
	padding:10px;
	text-align:center;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;		

}
.balloon-bot:before{
	content:"";
	position:absolute;
	bottom:-10px;
	left:50%;
	margin-left:-10px;
	width:0;
	height:0;
	border-top:10px solid #e4e8eb;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}

横型の吹き出し

横型の吹き出しの場合は、beforeとafterの擬似要素を組み合わせてみました。
他にもっと良い方法があるかもしれませんが、色々試した結果、今回はこの辺で…

名前
横型の吹き出し
名前
横型の吹き出しの反対ver

html

<ul class="commentlist">
	<li class="balloon-lef">
		<p class="author"><img src="画像パス" /><br />名前</p>
		<p class="balloon">横型の吹き出し</p>
	</li>
	<li class="balloon-rig">
		<p class="author"><img src="画像パス" /><br />名前</p>
		<p class="balloon">横型の吹き出しの反対ver</p>
	</li>
</ul>

CSS

.commentlist{
	list-style-type:none;
}
.commentlist li{
	overflow:hidden;
	margin-top:15px;
}
.commentlist .author{
	text-align:center;
	width:100px;
}
.commentlist .balloon{
    position:relative;
    color:#36393d;
    font-size:14px;
    line-height:20px;
	padding:15px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;    
}
.commentlist .balloon-lef .balloon{
	margin-left:110px;
	background-color:#e4e8eb;
}
.commentlist .balloon-lef .author{
	float:left;
}
.commentlist .balloon-rig .balloon{
	margin-right:110px;
	background-color:#bef18c;
}
.commentlist .balloon-rig .author{
	float:right;
}
.commentlist .balloon:before, .commentlist .balloon:after{
    content:"";
    position:absolute;
    width:0;
    height:0;
}
.commentlist .balloon-lef .balloon:before{
    top:10px;
	left:-20px;
    border-top:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid #e4e8eb;
}
.commentlist .balloon-lef .balloon:after{
    top:20px;
	left:-10px;
    border-top:10px solid #e4e8eb;
    border-left: 10px solid  transparent;
    border-right: 10px solid transparent;
}
.commentlist .balloon-rig .balloon:before{
    top:10px;
	right:-20px;
    border-top:10px solid transparent;
    border-left:10px solid #bef18c;
    border-right: 10px solid transparent;
}
.commentlist .balloon-rig .balloon:after{
    top:20px;
	right:-10px;
    border-top:10px solid #bef18c;
    border-left: 10px solid  transparent;
    border-right: 10px solid transparent;
}

【参考Webサイト】

コメント（0件）

LINEのような吹き出しをCSSで簡単に出来る方法を試してみましたに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
LINEのような吹き出しをCSSで簡単に出来る方法を試してみました