生活情報オンライン

ITエンジニアが役立つ情報を発信します。

HTML5/CSS3 だけで「キレイな」吹き出しを作る方法

ギザギザの吹き出し

前回の記事で、HTML5/CSS3 だけで吹き出しを作る方法をご紹介しました。
somegoro.hatenablog.com


しかし、公開した後になってだんだんと気になってきてしまったのです。ここのギザギザが。。。
f:id:somegoro:20171003005147p:plain

これは線(border)を重ねて三角に見せていることが原因です。



キレイなの吹き出し

ここのギザギザをなんとか滑らかに出来ないか試行錯誤してみました。
すると、こんなに滑らかにすることが出来ました。
f:id:somegoro:20171003005218p:plain



さらに、副作用としてソースコードも簡潔でキレイになりました。難点は前回のように影を付けられないということです。付けるとこんな感じになります。
f:id:somegoro:20171003004406p:plain

もうちょっと頑張って、少し大き目の三角を下に配置して影らしい色を付ければ出来ると思います。ここではソースコードの簡潔さを優先して影を全部取っ払ってしまいます。

f:id:somegoro:20171003004632p:plain

ほら、キレイな吹き出しが出来ました。


ソースコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon {
    padding-bottom: 13px;
    display: block;
}
.formBalloon .formBalloonContent {
    border-radius: 3px;
    padding: 6px 5px;
    width: auto;
    position: relative;
    color: #fff;
    background: #101177;
    font-size: 12px;
    min-width: 210px;
}
.formBalloon .formBalloonArrow{
  border: 8px solid transparent;
  border-top: 8px solid #101177;
  position: absolute;
  height: 0;
  left: 20px;
  width: 0;
  z-index: 1;
}
.balloonMsg {
    padding-bottom: 1px;
    display: block;
    line-height: 1.4;
    text-indent: 0;
}
</style>
</head>
<body>
<div class="formBalloon" style="position: absolute; z-index: 2;">
  <div class="formBalloonContent">
    <span class="balloonMsg"> ここに吹出に入れたい文章を入力してください。<br>吹出内の文章は複数行にすることもできます。</span>
  </div>
   <div class="formBalloonArrow"></div>
</div>
</body>
</html>