ほんの少しだけ大きさの違う三角形を重ね合わせて、枠線に見せるんです。ここを理解するまで少し時間がかかりました。吹き出しを構成する部品は3つあります。1吹き出しボックス(文章が入る部分)2黒い三角3白い三角そして、こららそれぞれ位置を設定してあげないといけないのがポイントになります。次に、この3つ繋ぎあわせていきます。配置の方法この説明が分かりやすかったのがこちらの記事。この記事の『「:before」「:after」の使い方』を見て下さい。CSSのborderと疑似要素で吹き出しを作る|コーディング代行ならコーディングファクトリーbeforeとafterっていうのは、簡単にいうと、何かの前後にそれぞれ別の何かをくっつけられるという事です。具体的に言い換えると、「吹き出しボックス」の前後に、「黒三角」と「白三角」をくっつけられるんです。ここで「前後」と言いましたが、これはあくまで名称だけの話ですから、座標を変えてしまえさえすれば、前後に限らず「2つとも前」に置くこともできますし、上下左右どこでも配置できるんですね。吹き出しの三角を上下左右どの方向にも向けられるということです。ここからは具体的なコード生成になっていくのですが、説明をかなり省略しているので、紹介した2記事をご覧になってから読むと、いくらか理解しやすいかと思います。BOX本体のコード具体的なコードを作っていきます。今回は左側に三角がくるようにするので「boxleft」という名前にしました。枠線の太さ1pxで、色は黒。余白は上下25px、左右25px。吹き出しは全体幅の64%。左端には画像を差し込む予定のため。20px;}三角部分コードは3つに分けました。両者共通部分、afterが白三角、beforeが黒三角、の3つです。