【CSS】下向き三角形（吹き出し）の作り方

2020/07/28

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

ある要素の下に下向き三角形をつける方法が知りたい
CSSの疑似要素afterを使って三角形を作れるようになりたい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

横幅を指定した長方形の要素の下部にちょこんと、下向き三角形を配置する方法を解説します。

三角形のコーディングで躓いている方の助けになれれば幸いです！！

目次 [非表示]

完成イメージ
サンプルコード
- HTML
- CSS
まとめ

完成イメージ

今回紹介するコードで実現できる三角形（吹き出し）はこちら！

▼▼▼

コーディング案件を続けていると、必ず遭遇するデザインです笑

以下、このコンポーネントの特徴となります。

三角形のサイズはborder-widthで指定したものになる
三角形の色はくっつける対象と同色にする
テキストは中央寄せ

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

サンプルコード

こちら、CodePenで作った見本です！

HTML

こちら、今回のコンポーネントのHTML構造です！

HTML

<div class="Balloon">
  <p class="Balloon-Text">テキストテキスト</p>
</div>

CSS

こちらスタイリングです！

三角形のサイズは「border-width」を調整してください。

三角形の配置は「bottom」の値を調整してください。

CSS

.Balloon {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  width: 64%;
  background: #5bc8ac;
}
@media screen and (max-width: 480px) {
  .Balloon {
    width: 88%;
  }
}
.Balloon:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -30px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #5bc8ac transparent transparent transparent;
  border-width: 30px 40px 0 40px;
}
.Balloon-Text {
  text-align: center;
  color: #fff;
  font-size: 20px;
}