为以div为中心的所有侧面添加指针箭头类

Question

我想将箭头添加到div中，就像在工具提示上看到的一样，我需要将单独的类添加到主div中，然后再将其放在div的中心，即左，右，顶部或底部。

无论div的宽度/高度如何，我都需要使箭头居中。

这是我到目前为止的内容： http : //jsfiddle.net/hRMgk/1/

完整的CSS，HTML和jQuery

<div id="theHover" class="therequest">
 <div class="noprint">
    <button  id="closetheHover">Close Window</button>
 </div>
        You need to start here on the website.
</div>

Answer 1

我认为您是在谈论聊天气泡中的三角形，在许多应用程序中这些三角形非常常见。这是我认为您感兴趣的小提琴链接 。

 #theHover.arrow::before
 {
content:'';
position:absolute;
left:50%;
top:100%;
border:12px solid black;
border-color:Blue transparent transparent transparent;
}
#theHover.arrow::after{
content:'';
position:absolute;
left:51%;
top:100%;
border:10px solid black;
 border-color:white transparent transparent transparent; 
}

基本上，这是通过在CSS中使用before内容和after内容属性来完成的...您可以从此站点获取更多信息...

Answer 2

凯利先生，

在CSS中添加代码（#hover）

    text-align:center;
    margin-top:auto;
    margin-bottom:auto;

检查此链接http://jsfiddle.net/hRMgk/18/

祝好运 ！