jquery - 为 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

我认为您在谈论聊天气泡中的三角形，这在许多应用程序中非常常见...这是我认为您感兴趣的小提琴链接..我刚刚将其添加到您的 css 中：

 #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 content 和 after content 属性来完成的......您可以从这个网站获得更多信息......

Answer 2

凯利先生，

在 CSS 中添加代码 (#hover)

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

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

祝你好运 ！