CSS3 だけで角丸バルーンを作る方法

phi phi on css

ちょっと会社の後輩から

角丸バルーンを CSS だけで作れないか

という質問を受けて試しに作ってみたので備忘録がてら紹介します.

Rusntant Demo

CSS

LESS

less バージョンも作ってみました.

Code

HTML

balloon クラス 付けるだけっす.

<div class='balloon'>  
  text text text text text text text text text
</div>  

CSS

:before, :after 擬似クラスでゴニョゴニョやってます.

.balloon {
  width: 200px;
  margin: auto;
  background-color: white;
  padding: 1rem;
  position: relative;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.balloon:before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(90deg);
  top: 20px;
  left: -14px;
  z-index: 0;
}

.balloon:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-top: 10px solid #aaa;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(90deg);
  top: 20px;
  left: -15px;
  z-index: -1;
}

解説

CSS 部分についてのみ解説します.

角丸については今となっては常識となった border-radius を指定するだけです.

  border-radius: 4px;

次に吹き出し部分です. やっていることはシンプルで, :before, :after 擬似クラスで 三角形を作って, 枠に重ねているだけです.

三角形は, border ハックで簡単に作ることができます.

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

border で三角形ってピンとこないってかたは
こちらのサンプル見てみてください. -> http://goo.gl/b5TGjl

更にこれだと下向きの三角形なので, rotate(90deg); で横向きになるよう回転させています.

  transform: rotate(90deg);

そして, position:absolute; を指定し, left, top プロパティで位置を整えていきます. 少しだけ :before を balloon 側に寄せておきます.

  position: absolute;
  top: 20px;
  left: -15px;

最後に :before は balloon の background-color と同じ色にして, :after は balloon の border と同じ色にして zIndex をそれぞれ 0, -1 を指定します.

  z-index: -1;

これで吹き出し側のボーダーを表現できます.

CSS も CSS3 から機能が充実して色々とやれるようになってきています.
慣れればプログラミングで絵を書くような感覚で様々な表現ができて楽しいですよ♪