CSSで作る！吹き出しデザインのサンプル19選

今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ

[norip44]

吹き出しのCSS、毎回忘れちゃう #積ん読ページ消化

[cha1ra]

“.balloon2-left:before { content: ""; position: absolute; top: 50%; left: -24px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #FFF; z-index: 2; } .balloon2-left:after { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -14px; border: 14px solid tran

[renkaxxxx]

“#d7ebfe”

[ryousukex]

枠線をつけたい時に参考になる

[lightning2014]

メモメモ

[nadanonadanotamenonadaniyoru]

これはいいですね！早速使わせていただきます！