Css 需要帮助在div容器上定位箭头吗

我正在尝试用arrow制作一个纯css div（比如speechbubble）

我在这里创作了一把小提琴

基本上，我没有在小提琴中使用图像，但是当你将鼠标悬停在div动画的图像上时，我使用了div框的左侧。当您将鼠标悬停在链接上时，可以看到效果

我想让它看起来像一个演讲泡泡，但努力做到这一点

这是我所追求的形象

---

非常感谢您的帮助。我只需要帮助来完成div的箭头。

我能想到的最简单的方法是使用before pseudo类在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;
}

这是一个例子

---

我用canvas尝试了一下，我自己动手做了，并想出了一个很好的解决方案。代码如下

.logo-heading  {
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
 -webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
       }
   .logo-heading2{
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
display:none;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
 -webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
    }
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #f0f0f0 transparent transparent;
position:absolute;
top: 14px;
left: -21px;
}

#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -20px;
top: 14px;
}

在js中更改了一些内容，效果非常好。谢谢各位