吹き出しコメントデザインをCSSで実装。
塗りつぶしと枠線バージョンの2種類の方法を紹介します。

サンプルデモ

PostCSSで記述していますが、CSSで解説していきます。

See the Pen GYXyYw by Masaki Oba (@Cleysense) on CodePen.

作成手順

吹き出しとなる三角部分以外は普通の四角いオブジェクトなので、キーとなるこの部分の実装方法を順を追って説明します。

三角のオブジェクトの作成

border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;

向かせたい方向の逆方向以外のborder-colorをtransparentにすることで、CSSで三角のオブジェクトを作ることができます。
各border-widthを変更することで、三角の形を調整することもできます。

左右位置の調整

position: absolute;
left: 50%;
transform: translateX(-50%);

positionがabsoluteのとき、topやleftの値を50%にして、transformのtranslateで50%に指定した軸に-50%の値を設定することで、オブジェクトを中央に配置することができます。

上下位置の調整

bottom: -10px;

三角のオブジェクトの高さは、border-topの値になるので、-10pxの値を指定すると最下部にくっつく形になります。

枠線の場合は白い三角を上から乗せる

border-top-color: #fff;
bottom: -9px;
z-index: 10;

三角のオブジェクトに枠線をつけると上部にも線が見えてしまうため、同じ形をした白い三角のオブジェクトを1pxずらして、z-indexを使用して上レイヤーから乗せます。
擬似的ですが、これで枠線付きの吹き出しコメントを実装することができます。

SNSでシェアする:

大場 正樹 (Masaki Oba)

Web制作会社に3年ほど勤務し、2014年1月にフリーランスとして「Cleysense」を立ち上げ、Webデザイン・DTPデザイン・フロントエンド・バックエンド・ディレクション・コンサルティングなど、幅広く活動中。