Help us understand the problem. What is going on with this article?

LINE風吹き出しCSS

See the Pen line-like by ririli (@ririli) on CodePen.

吹き出しが使いたい場面って結構多いですよね。
でも実装はそんなにシンプルじゃないので画像で済ませちゃう人も多いかも。

わかってみれば意外と難しくないので挑戦してみてください。

ポイント

なんといっても下にちょっと突き出たとこ、これがやりたいわけですよね。
実装では以下が該当します。

.left:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 10px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

具体的にはborderとborder-topですね。
borderで透明な太い線をひきます。
その上にborder-topで上だけに色をつけます。

これで三角の完成です。
あとは適切な場所に配置するだけ。

...とはいかないですよね。

なんで三角になるわけ?

おそらくborder-topを指定しただけでどうして三角形になるのか疑問が出た人も多いと思います。
かくいう僕もそうでした。

もし手元に試せる環境があったら以下のcssを当ててみてください。

  border-top: 5px solid red;
  border-left: 5px solid blue;
  border-tight: 5px solid green;
  border-bottom: 5px solid yellow;

色の違う4本の線で四角形ができたでしょうか?
では線同士がぶつかる角の部分はどうなっているでしょうか?
どちらかで埋まっているのではなく色が半分ずつになっていませんか?

これがborder-topで三角になる理由です。

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away