こちらの記事 に出てくる会話部分のCSSです。
ほぼ参考サイトのままですが、文脈上、自分側の吹き出しが２人の部分があって、
参考サイトのCSSでは対応できなかったので、ちょっと追加しました（ほげほげ-doubleのやつ）。
相手側のふきだしも同様に対応すればイケると思います。
あと、参考サイトより、角丸をすこし抑えました。
<style>
/***********************************
チャット風レイアウト
Special Thanks To:
[レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep http://vdeep.net/css-chat-design
レスポンシブ＋スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】 | ガジェニュー http://smart-phone.783783783.com/2016/02/25/chatlike-css/
************************************/
/*画像左側のチャット*/
.chat-box {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img {
width: 90px;
height: 90px;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block;
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi p {
margin-bottom: 0px;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 35px;
left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #D9F0FF transparent transparent;
}
/*画像左側のチャット(2人)*/
.chat-box-double {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.chat-face-double {
float: left;
margin-right: -220px;
}
.chat-face-double img {
width: 90px;
height: 90px;
display: inline-block;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area-double {
width: 100%;
float: right;
}
.chat-hukidashi-double {
display: inline-block;
padding: 15px 20px;
margin-left: 220px;
margin-top: 8px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi-double p {
margin-bottom: 0px;
}
.chat-hukidashi-double:after {
content: "";
position: absolute;
top: 35px;
left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #D9F0FF transparent transparent;
}
/*画像右側のチャット*/
.chat-box-right {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.chat-face-right {
float: right;
margin-left: -120px;
}
.chat-face-right img {
width: 90px;
height: 90px;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area-right {
width: 100%;
float: left;
}
.chat-hukidashi-right {
display: inline-block;
padding: 15px 20px;
margin-right: 120px;
margin-top: 8px;
border-radius: 10px;
position: relative;
background-color: #BCF5A9;
float: right;
}
.chat-hukidashi-right p {
margin-bottom: 0px;
}
.chat-hukidashi-right:after {
content: "";
position: absolute;
top: 35px;
right: -20px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #BCF5A9;
}
/*スマホの時は画像を小さく*/
@media screen and (max-width: 440px) {
/*画像左側のチャット*/
.chat-face {
float: left;
margin-right: -80px;
}
.chat-face img {
width: 60px;
height: 60px;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi {
display: inline-block;
padding: 10px 10px;
margin-left: 80px;
margin-top: 0px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
min-height: 3em;
}
/*画像左側のチャット(2人)*/
.chat-face-double {
float: left;
margin-right: -150px;
}
.chat-face-double img {
width: 60px;
height: 60px;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi-double {
display: inline-block;
padding: 10px 10px;
margin-left: 150px;
margin-top: 0px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
min-height: 3em;
}
/*画像右側のチャット*/
.chat-face-right {
float: right;
margin-left: -80px;
}
.chat-face-right img {
width: 60px;
height: 60px;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi-right {
display: inline-block;
padding: 10px 10px;
margin-right: 80px;
margin-top: 0px;
border-radius: 10px;
position: relative;
background-color: #BCF5A9;
float: right;
min-height: 3em;
}
}
</style>
<div class="chat-box">
<div class="chat-face">
<img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
</div>
<div class="chat-area">
<div class="chat-hukidashi">
おっおっおっ
</div>
</div>
</div>
<div class="chat-box-double">
<div class="chat-face-double">
<img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
<img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="90" height="90"/>
</div>
<div class="chat-area-double">
<div class="chat-hukidashi-double">
おっおっおっ
</div>
</div>
</div>
<div class="chat-box-right">
<div class="chat-face-right">
<img src="https://hacknote.jp/wp-content/uploads/avatars/750/8cfce5fb0d4aa38908c01f008105bfc0-bpfull.jpg" width="50" height="50"/>
</div>
<div class="chat-area-right">
<div class="chat-hukidashi-right">
おっおっおっ
</div>
</div>
</div>
