吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな

吹き出し

下記の吹き出しのスタイルシートについて

下記のスタイルシートは左側にアイコンがでる使用になっているのですが、右側にアイコンを使用する形の吹き出しスタイスシートにしていただけないでしょうか？

自分でいじったのですが、吹き出しの口の部分の◁が▶にならなかったりと困っております。
お忙しいとは思いますが、どこをいじればいいのか教えていただけないでしょうか？
何卒、よろしくおねがいいたします。



スタイルシートの参考記事は下記になります。
https://saruwakakun.com/html-css/reference/speec …


●HTML

<!--吹き出しはじまり-->
<div class="balloon5">
<div class="faceicon">
★ここに画像を入れる <img~>★
</div>
<div class="chatting">
<div class="says">
<p>★文章を入れる★</p>
</div>
</div>
</div>
<!--吹き出し終わり-->

●スタイルシートについて
.balloon5 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}

.balloon5 .faceicon {
float: left;
margin-right: -90px;
width: 80px;
}

.balloon5 .faceicon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}

.balloon5 .chatting {
width: 100%;
}

.says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}

.says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}

.says p {
margin: 0;
padding: 0;

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/11/12 19:16

こんばんは

右側に三角形が表示されるタイプにできればよいってことですよね？

＞吹き出しの口の部分の◁が▶にならなかったりと困っております。
「◁」のCSSに該当するのは、.says:after の部分で、吹き出し本体と同じ色と透明のボーダーを組み合わせて三角形をつくっています。

サイズや高さ方向の位置等はそのままで良いのなら、本体に対して左右を入れ替えれば良いだけなので、2か所修正すれば右側に吹き出しの三角形が表示されるようになります。

　left: 100%;
　border-left: 12px solid #d7ebfe;

の2か所ですね。

この回答へのお礼

お返事有難うございます！
そのとおりです。

▶︎の場所が知りたかったのです。
変更する点を親切に教えてくださって助かりました！

お礼日時：2022/11/12 19:25