cssで吹き出しを作る方法はいくつかあります。
枠線なしの吹き出しを作るのは比較的簡単です。例えばこちらの記事。
CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
こんにちは、めぐたんです。前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみまし...
www.granfairs.com
ただ、枠線ありを作るのはなかなか難しいです。例えばこちらの記事。
【CSS】枠線つきの三角形を作る方法。対角線を使った三角形を使って吹き出しを作る。 - Qiita
##枠線つきの三角形を作る方法。対角線を使った三角形を使って吹き出しを作る。CSSで枠線つきの三角形を使った吹き出しを作る際に、四辺のどれか２つを使う三角形は比較的に簡単にできたが、対角線を使っ…
qiita.com
今回、枠線ありの吹き出しを作る新しい方法を思いついたので、メモしておきます！
我ながら、いいアイデアなのではないかと✨
<div class="balloon_border">
枠線ありの吹き出し！
</div>.balloon_border {
position: relative;
display: flex;
align-items: center;
width: fit-content;
height: 40px;
background: #fff;
padding-inline: 24px;
border-radius: 20px;
border: 1px solid #ccc;
margin-inline: auto;
color: #333;
font-size: 16px;
&::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
translate: -50% 0;
width: 12px;
height: 12px;
background: #fff;
border: 1px solid #ccc;
rotate: -45deg;
clip-path: polygon(0px 0px, 0px 100%, 100% 100%);
}
}疑似要素にこの2つを使うのが特徴です！
rotate: -45deg;
clip-path: polygon(0px 0px, 0px 100%, 100% 100%);詳しくは、こちらのCodePenもご参照ください。
