css3で吹き出し作って、疑似要素がz-indexでどっか行っちゃうの直す

当ブログでは長年？画像で吹き出しを表現していたのですが、retina対応をした時に画像のぼけ具合が気になり出しました。cssで表現出来る部品はなるべくそっちにシフトしたいなーということで！ webでは吹き出しを作るための便利なジェネレーターや沢山の優れたリファレンスが公開されますが、勉強がてら自分なりにまとめてみることにしました。 まずは構成から どうしてもcssの行数が長ーくなるのが欠点ですな…。それでも画像の方が重いんだろうと気を取り直してやってみます。 疑似要素のbefore afterを使って吹き出し部分を表現します。 ボーダーのある吹き出しにしてみる。 たのしい毒矢入門を読んだんだ。 部品となるのは、 本体の要素p 内容とbackgroundカラーとborder beforeによる前の要素 吹き出しの三角部分（pのボーダー色と同色） afterによる後の要素 吹き出しの三角部分（

[uunfo]

スタックコンテキストの説明がわかりやすい