CSS影付き吹き出し位置12パターン - Qiita

影付き吹き出しの作り方を毎回調べている気がするのでメモっておく。 内側にも要素を設ける方法 概要 一番無難な方法です。特に事情が無ければこれを選択してください。 サイズゼロ要素のborderを太くする方法だと影つきのものに対応できないので，transformのrotate()とskew()を活用する方法を使います。 z-indexを使うことで，前後関係を定義しています。 ひし形の内側部分がテキストと被らないように，四角形の疑似要素を上から被せています。テキストはさらにその上に来るようにします。 長所 位置の微調整をしやすい 倍率によらず表示が安定している 基本的にアニメーションを併用できる 短所 HTMLがやや冗長 実装 data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+Cgo8bWV0YSBjaGFyc2V0PSJVVEYtO

[k-holy]

これはありがたい