cssで吹き出しを作る方法はいくつかあります。
枠線なしの吹き出しを作るのは比較的簡単です。例えばこちらの記事。
![](https://www.granfairs.com/blog/upload/staff-2017-09-21-use-triangle-with-css.png)
CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする | 株式会社グランフェアズ
こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう!その1:borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか?どのような設定でどんな三角形ができるのか?を詳しく掘り下げてみま...
ただ、枠線ありを作るのはなかなか難しいです。例えばこちらの記事。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwQ1NTJUUzJTgwJTkxJUU2JTlFJUEwJUU3JUI3JTlBJUUzJTgxJUE0JUUzJTgxJThEJUUzJTgxJUFFJUU0JUI4JTg5JUU4JUE3JTkyJUU1JUJEJUEyJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JUUzJTgwJTgyJUU1JUFGJUJFJUU4JUE3JTkyJUU3JUI3JTlBJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJTlGJUU0JUI4JTg5JUU4JUE3JTkyJUU1JUJEJUEyJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUU1JTkwJUI5JUUzJTgxJThEJUU1JTg3JUJBJUUzJTgxJTk3JUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJUUzJTgwJTgyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01ZjMyMTNjZDc4OTE3MDZkOWUwZjUzZjY2ZGJlNWViOQ&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGl6ZW4tc2hpbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzkwN2EwZGM0ODYxM2MzNDQ1OTJmOGYzZTg0M2QzZGM&blend-x=142&blend-y=486&blend-mode=normal&s=f8716dd5ad849f9ede939c7bbed9f485)
【CSS】枠線つきの三角形を作る方法。対角線を使った三角形を使って吹き出しを作る。 - Qiita
##枠線つきの三角形を作る方法。対角線を使った三角形を使って吹き出しを作る。CSSで枠線つきの三角形を使った吹き出しを作る際に、四辺のどれか2つを使う三角形は比較的に簡単にできたが、対角線を使っ…
今回、枠線ありの吹き出しを作る新しい方法を思いついたので、メモしておきます!
我ながら、いいアイデアなのではないかと✨
<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もご参照ください。