SCSS borderを使ったアロー付き吹き出し

CSS

アローの位置はpositionで配置するボックスの外側にくっつけること用途が多いと思うがその場合absoluteの指定を負の値にするとよい。
ちなみに下のコードはscssのシンタックスなのでcssにするには多少書き換える必要ある。
scss

.bubble {
  background: #333;
  color: #fff;
  position: relative;

  &:after {
    content: "";
    position: absolute;
      top: -13px;
      left: 16px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7px 13px 7px;
    border-color: transparent transparent #333 transparent;
  }
}

html

<div class="bubble">
  aaaa
</div>

f:id:arcright:20130508161439p:plain
擬似要素でアローを書いてる。先端にする部分を一番長くして線の色を付ける。
その他の部分の色は透明にする。

参考リンク