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

2020/07/28

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

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

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

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

完成イメージ

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

▼▼▼

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

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

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

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

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

サンプルコード

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

See the Pen
abdrmma by 石森裕也 (@yuyaphotograph)
on 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;
}

まとめ

以上、CSSの疑似要素afterで作った三角形をある要素の下にいい感じにくっつける方法を紹介しました。

Web制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！