css - 需要帮助在 div 容器上定位箭头

Question

我正在尝试制作一个带箭头的纯 css div(如对话泡泡)

我在这里创建了一个 fiddle http://jsfiddle.net/ozzy/j9Wku/

基本上，我没有在 fiddle 中使用图像，而是在将鼠标悬停在 div 动画图像上时在 div 框的左侧使用图像。将鼠标悬停在链接上即可看到效果。

我想让它看起来像一个对话泡泡，但很难做到这一点。

这是我所追求的图像。

非常感谢任何帮助。我只需要帮助为 div 制作箭头。

Answer 1

我能想到的最简单的方法是使用 before 伪类在你的 P 标签之前插入“空格”然后用边框设计它。

p::before {
display: block;
position: absolute;
top: 18px;
left: -10px;
content: '';
border-top: 10px solid transparent;
border-right: 10px solid #eeeeee;
border-bottom: 10px solid transparent;
}

http://jsfiddle.net/j9Wku/6/