CSSのみで吹き出し(バルーン)を作るサンプルです。
SVGで作る方法もありますが、CSSなので比較的とっかかりやすい印象です。
また、画像を作成する手間も省け、内容が変動する場合に重宝します。
下から吹き出しバージョン
吹き出しサンプル
#balloon1 { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 115px; height: 40px; line-height: 34px; color: #19283C; text-align: center; background: #FFF; border: 3px solid #19283C; z-index: 0; margin: 0 0 20px; border-radius: 10px; } #balloon1:before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -9px; width: 0px; height: 0px; border-style: solid; border-width: 9px 9px 0 9px; border-color: #FFF transparent transparent transparent; z-index: 0; } #balloon1:after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -10px; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0 10px; border-color: #19283C transparent transparent transparent; z-index: -1; }
左から吹き出しバージョン
吹き出しサンプル
#balloon2 { position: relative; display: inline-block; padding: 0 15px; width: auto; min-width: 115px; height: 40px; line-height: 34px; color: #19283C; text-align: center; background: #FFF; border: 3px solid #19283C; z-index: 0; border-radius: 10px; } #balloon2:before { content: ""; position: absolute; top: 50%; left: -8px; margin-top: -9px; width: 0px; height: 0px; border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #FFF transparent transparent; z-index: 0; } #balloon2:after { content: ""; position: absolute; top: 50%; left: -12px;/*位置調整*/ margin-top: -10px; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #19283C transparent transparent; z-index: -1; }