アローの位置は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>
擬似要素でアローを書いてる。先端にする部分を一番長くして線の色を付ける。
その他の部分の色は透明にする。